Question

所以，问题是我似乎无法理解为什么此功能无法正常工作。它用于我在国家公园上执行的API。我认为也许另一组眼睛可以注意到我没有的东西。我已经编程很长时间了，并把一切都当作学习经验。

谢谢。

我尝试了许多操作，但似乎都无法正常工作。我是编程新手。

function showResults(responseJson, params) {
  $('.results-list').empty();
  let html = '';
  for (let i = 0; i < responseJson.data.length; i++) {
    const park = responseJson.data[i];
    const description = park.description;
    const name = park.name;
    const url = park.url;
    const address = park.directionInfo;

    html += `
  <li><h3>${name}</h3>
  <p>Description: ${description}</p>
  <p>Link: <a href="${url}">${URL}</a></p>
  <p>Address: ${address}</p>
  </li>`;
    console.log('ugh');
  }
  $('.results-list').html(html);
  $('.results-page').removeClass('hidden');
}

function parkResults(query, highResult = 10) {
  highResult -= 1;

  const params = {
    api_key: apiKey,
    limit: highResult,
    stateCode: query
  };
  const queryString = formatQueryParams(params);
  const url = searchURL + '?' + queryString;

  fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error(response.statusText);
    })
    .then(responseJson => showResults(responseJson, query))
    .catch(err => {
      $('.error-message').text(`Error:${err.message}`);
      console.log('?');
    });
}

根据console.log，该功能无法正常工作，但未显示任何错误。所以，我有点迷失了这个。我只是希望该功能正常工作。

Answer 1

此代码可以正常工作。我已经将代码简化为其他人可以使用和复制的东西。 fetch(...)看起来不错，所以我建议您查看URL和输出格式是否怪异。

注意，我删除了所有作用域声明以及多行字符串格式（反引号）。随时根据需要将它们重新添加。

<html>
<body>
<p id="results-list">Please wait...</p>
<script>
function showResults(json) {
    var element = document.getElementById('results-list');
    element.innerHTML = '';
    var html = '';
    for (var i = 0; i < json.data.length; i++) {
        var park = json.data[i];
        html += '<li><h3>' + park.name + '</h3>' +
            '<p>Description: ' + park.description + '</p>' +
            '<p>Link: <a href="' + park.url + '">' + park.url + '</a></p>' +
            '<p>Address: ' + park.directionInfo + '</p>' +
            '</li>';
    }
    element.innerHTML = html;
}

function fetchPark() {
    var url = 'https://developer.nps.gov/api/v1/parks?parkCode=acad&api_key=SECRET_YOU_CAN_GET_ONE_AT https://www.nps.gov/subjects/developer/get-started.htm';

    fetch(url)
    .then(response => {
        if (response.ok) return response.json();
    })
    .then(json => showResults(json))
    .catch(err => { console.error(err); });
}

fetchPark();
</script>
</body>
</html>

输出为：

阿卡迪亚

描述：阿卡迪亚国家公园保护最高自然美景   美国大西洋沿岸的岩石岬角   具有高生物多样性，清洁空气和水以及丰富文化的栖息地   遗产。每年，超过330万人在上方探索七个高峰   1,000英尺，158英里的远足径和45英里的马车道，其中16条   石桥。

链接：https://www.nps.gov/acad/index.htm

地址：未定义

此外，请注意代理或防病毒之类的奇怪内容。当无法获得预期的响应时，应排除所有可以拦截HTTP流量的内容。

无法显示responseJson

1 个答案:

阿卡迪亚