Question

在我的搜索中插入全州名称时，我的代码将在该部分正常工作的区域附近的国家公园返回。我的问题是，当您仅添加State缩写时，效果并不理想。

在公园上的https://www.nps.gov/subjects/developer/api-documentation.htm#/parks/getPark上再次阅读了文档之后，我发现javascript中缺少stateCode（以逗号分隔的2个字符状态代码列表。）。

function getNationalParksInfo(query, maxResults = 10) {
  const params = {
    key: apiKey,
    q: query,    
    limit: maxResults - 1
  };
  const queryString = formatQueryParams(params);
  const url = searchURL + "?" + queryString;

  console.log(url);

  fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error(response.statusText);
    })
    .then(responseJson => displayResults(responseJson))
    .catch(err => {
      $("#js-error-message").text(`Something went wrong: ${err.message}`);
    });
}

正如您在const params对象中看到的那样，一旦添加了stateCode，q就会带回一个州内的国家公园所需的搜索（只要您添加完整的州名），我就应该能够接收相同的国家公园同时使用状态2字母字符的缩写。`

"use strict";

const apiKey = "VBJvAbqe0D9w3pyhaHcw4p4MB2dNgSgxMjvCbyEH";
const searchURL = "https://api.nps.gov/api/v1/parks";

function formatQueryParams(params) {
  const queryItems = Object.keys(params).map(
    key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
  );
  return queryItems.join("&");
}

function displayResults(responseJson) {
  // if there are previous results, remove them
  console.log(responseJson);
  $("#results-list").empty();
  // iterate through the items array
  for (let i = 0; i < responseJson.data.length; i++) {
    // for each park object in the items
    //array, add a list item to the results
    //list with the park title, description,
    //and thumbnail
    $("#results-list").append(
      `<li><h3>${responseJson.data[i].fullName}</h3>
      <p>${responseJson.data[i].description}</p>
      <a href='${responseJson.data[i].url}'>${responseJson.data[i].url}</a>
      </li>`
    );
  }
  //display the results section
  $("#results").removeClass("hidden");
}

function getNationalParksInfo(query, maxResults = 10) {
  const params = {
    key: apiKey,
    q: query,
    limit: maxResults - 1
  };
  const queryString = formatQueryParams(params);
  const url = searchURL + "?" + queryString;

  console.log(url);

  fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error(response.statusText);
    })
    .then(responseJson => displayResults(responseJson))
    .catch(err => {
      $("#js-error-message").text(`Something went wrong: ${err.message}`);
    });
}

function watchForm() {
  $("form").submit(event => {
    event.preventDefault();
    const searchTerm = $("#js-search-term").val();
    const maxResults = $("#js-max-results").val();
    getNationalParksInfo(searchTerm, maxResults);
  });
}

$(watchForm);

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.error-message {
  color: red;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>National Parks by Location</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <h1>Your National Parks</h1>

    <form id="js-form">
      <label for="search-term">Search term</label>
      <input type="text" name="search-term" id="js-search-term" required />

      <label for="max-results">Maximum results to return</label>
      <input type="number" name="max-results" id="js-max-results" value="10" />

      <input type="submit" value="Go!" />
    </form>

    <p id="js-error-message" class="error-message"></p>
    <section id="results" class="hidden">
      <h2>Search results</h2>
      <ul id="results-list"></ul>
    </section>
  </div>
  <script src="app.js"></script>
</body>

</html>

`

Answer 1

向API调用添加另一个参数。请记住，它是一个字符串数组。

 const params = {
    key: apiKey,
    q: query,    
    limit: maxResults - 1,
    stateCode:'mi';
  };

添加2个字符状态代码

1 个答案: