呼叫休息api并显示搜索结果 [英] call rest api and display result as searched for

问题描述

我从这个 HTML 表单中调用 REST API

<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结构如下所示

My API structure looks like this

{
    "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的方式

and this is how i am calling the 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();
}

我得到了所有数据，但我需要的只是匹配的数据在输入字段中输入邮政编码

I get all the data but what i need is only the data that matches the ZIP Code entered in the input field

推荐答案

您可以从 Agents 对象中获取 @ZipCode 值，并与输入值进行比较。

You can get @ZipCode value from Agents object and compare with the input value.

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

以下是显示提醒如果输入值与样本数据' zipCode 值匹配。

Here is the working snippet that display the alert if input value is matched with sample data' zipCode value.

  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>

注意：从评论中，您的响应对象如何具有多个zipCode 仍然令人困惑。

Note: From comments it is still confusing that how your response object can have multiple zipCode.

@Comment - 查看你的代码responseData.Agents.Agent responseData是一个对象，Agents是一个对象，怎么会有多个Agents对象在一个对象中。甚至如何在Agents对象中有多个ZipCode prpertirs

@Comment- Look at your code responseData.Agents.Agent responseData is an object, Agents is an object, how there can be multiple Agents objects in an object. Or even how can be multiple ZipCode prpertirs in Agents object

这篇关于呼叫休息api并显示搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！