Question

在我的搜索中，当我添加密歇根州或俄亥俄州之类的州时，它会返回国家公园，这部分工作正常。我的问题是，当您仅添加State缩写时，效果并不理想。

如果我查询https://developer.nps.gov/api/v1/parks?stateCode=AK&api_key=VBJvAbqe0D9w3pyhaHcw4p4MB2dNgSgxMjvCbyEH，我将得到一个返回了带有适当数据的json。现在我想我错过了代码的一步

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}`);
    });
}

对我来说，理想的结果是输入州缩写的全州名称，然后得到相同的搜索结果。

"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>

我在国家公园项目中使用的2个字符的州代码不起作用

0 个答案: