通過郵政編碼API搜索JSON名稱

Question

我是jQuery，JSON和API的新手，我正在嘗試構建一個小型Web應用程序，當用戶輸入service.type.name和postcode時，該應用程序將在該地區建立本地醫院。 例如，“ N77JN中的Hernia修復”。

我有一個小的JSON文件設置，其中包含一些列出其地址和服務的醫院對象。

{
  "places":[
    {
      "name": "The Whittington Hospital",
      "address": { 
        "street": "Magdala Ave",
        "town": "Islington",
        "city": "London",
        "postcode": "N195NF"
      },
      "service": [{
        "type": [
          { "name": "Hernia Repair" },
          { "name": "Hip Replacement" },
          { "name": "Crohn's Disease" },
          { "name": "Pregnancy" }
        ]
      }]
      }
      ...
  ]
}

我正在嘗試確定是否可以使用此UK Postcodes API引用我的JSON文件中的地址，並根據郵政編碼是否與搜索查詢匹配或在3英里之內返回結果。 顯然，您可以使用以下代碼執行此操作：

http://uk-postcodes.com/postcode/nearest?postcode=n77jn&miles=3&format=json

我的HTML看起來像這樣：

<form id="fetch">
    <input type="text" id="query">
    <input type="submit" id="search" value="Go">
</form>

我的JS是這樣的：

$(function() {
var data;

$.getJSON('data.json', function(jsondata) { data = jsondata; });

function performSearch(e){
    e.preventDefault();

    if (data == undefined) return; // do nothing if json is not yet loaded

    var search = $('#query').val();
    var output="<h2>Search results for " + search + "</h2>";

    for (var i in data.places) {
        for (var ind in data.places[i].service[0].type) {
            if (data.places[i].service[0].type[ind].name == search) {
                output+="<h3>" + data.places[i].name + "</h3>";
            } else {}
        };
    };
    document.getElementById("main").innerHTML=output;
};

$('#fetch').on('submit', performSearch);

});

隨着我的JS的基本的了解，我應該能夠采取像“在N77JN疝修補術”，這是存儲在一個搜索search變量和.split吧“在” search.split(" in ")這將分離將該字符串放入數組中，給我兩個值（“ Hernia Repair”，“ N77JN”）。 我在正確的軌道上嗎？

我想我可以使用這兩個值來查看Postcode API，並為該地區的醫院提供結果。 我只是不確定如何去做。

感謝您為我指明正確方向的任何幫助。

提前致謝！

Answer 1

您可以執行以下操作：

var serviceName = search.split(" in ")[0];
var postcode = search.split(" in ")[1];
var matches = $.grep(data, function (e) { 
    return (e.places.address.postcode == element && e.places.service.type.name == serviceName ) });

現在，根據需要使用matches數組。 希望能幫助到你 ：）

注意：我認為您應該考慮對兩個輸入（郵政編碼和服務類型）使用兩個單獨的文本框，用戶可能不會總是在兩個空格之間輸入“ in” 。