javascript - 调用rest api并显示搜索结果

我正在从此REST API表单调用HTML

<form action="#">
    <h1>Enter your zip code</h1>
    <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip">
    </div>
    <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST()">Next</button>
    </div>
</form>

我的API结构如下所示

{
    "Agents":
    {
        "@ZipCode": "33176",
        "Agent": [
        {
            "AgencyID": "21",
            "Name": "Anakarina Callejas",
            "Phone": "305-515-5613",
            "CityName": "KENDALL",
            "Address": "10471 N Kendall Dr. #101. Miami, FL 33176",
            "Reviews-Rating": "5",
            "Reviews-Count": "74",
            "image": "/images/agents/21.png"
        },
        {
            "AgencyID": "116",
            "Name": "Tamara Mourino",
            "Phone": "305-256-0616",
            "CityName": "PINECREST",
            "Address": "12745 South Dixie Highway. #101. Pinecrest, FL 33156",
            "Reviews-Rating": "5",
            "Reviews-Count": "70",
            "image": "/images/agents/116.png"
        }]
    }
}

这就是我调用API的方式

function callREST() {
    // Create a request variable and assign a new XMLHttpRequest object to it.
    var request = new XMLHttpRequest();

    // Open a new connection, using the GET request on the URL endpoint
    request.open('GET', 'URL to the API', true);

    request.onload = function () {
      // Begin accessing JSON data here
      var responseData = JSON.parse(this.response);
      var data = responseData.Agents.Agent;

      if (request.status >= 200 && request.status < 400) {
        data.forEach(agent => {
          // Log each agent's title
          console.log(agent.Name);
        });
      } else {
          console.log('error');
        }

    }

    // Send request
    request.send();
}

我得到了所有数据，但我只需要与在ZIP Code中输入的input field匹配的数据

最佳答案

您可以从Agents对象获取@ZipCode值，并将其与input value进行比较。

var responseData =JSON.parse(jsonResponse);
var zipCode= responseData.Agents['@ZipCode'];

如果alert与样本数据的input value值匹配，这是显示zipCode的工作片段。

  var jsonResponse='{"Agents":{"@ZipCode": "33176","Agent": [{"AgencyID": "21","Name": "Anakarina Callejas","Phone": "305-515-5613","CityName": "KENDALL","Address": "10471 N Kendall Dr. #101. Miami, FL 33176","Reviews-Rating": "5","Reviews-Count": "74","image": "/images/agents/21.png"},{"AgencyID": "116","Name": "Tamara Mourino","Phone": "305-256-0616","CityName": "PINECREST","Address": "12745 South Dixie Highway. #101. Pinecrest, FL 33156","Reviews-Rating": "5","Reviews-Count": "70","image": "/images/agents/116.png"}]}}';

function callREST() {
   event.preventDefault();//for demo to prevent form submit.
   var inputZip=document.getElementById("zip").value;
   var responseData =JSON.parse(jsonResponse);
   var zipCode= responseData.Agents['@ZipCode'];
   //console.log(inputZip,zipCode);
   if(zipCode==inputZip){
      alert("ZipCode matched.");
   }else{
     alert("ZipCode not matched.");
   }
}

<form action="#">
    <h1>Enter your zip code</h1>
    <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip">
    </div>
    <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST();">Next</button>
    </div>
</form>

注意：从注释来看，您的response对象如何具有多个zipCode仍然令人困惑。


  @ Comment-查看您的代码responseData.Agents.Agent responseData是一个对象，Agents是一个对象，一个对象中如何有多个Agents对象。甚至在Agents对象中如何有多个ZipCode属性