導航json文件以創建所需的數組以實現jQuery自動完成

Question

我正在為搜索欄編寫一個自動完成功能，該功能具有挪威地方名稱。

我從第三方提供的REST api URL中收集數據。 輸入“ st”和兩個結果的示例：

{
   "sokStatus":{
      "ok":"true",
      "melding":""
   },
   "totaltAntallTreff":"81280",
   "stedsnavn":[
      {
         "ssrId":"23149",
         "navnetype":"By",
         "kommunenavn":"Larvik",
         "fylkesnavn":"Vestfold",
         "stedsnavn":"Stavern",
         "aust":"214841.84",
         "nord":"6550500.29",
         "skrivemaatestatus":"Godkjent",
         "spraak":"NO",
         "skrivemaatenavn":"Stavern",
         "epsgKode":"25833"
      },
      {
         "ssrId":"506202",
         "navnetype":"By",
         "kommunenavn":"Stord",
         "fylkesnavn":"Hordaland",
         "stedsnavn":"Stord",
         "aust":"-32194.93",
         "nord":"6665261.05",
         "skrivemaatestatus":"Godkjent",
         "spraak":"NO",
         "skrivemaatenavn":"Stord",
         "epsgKode":"25833"
      }
   ]
}

我想讓自動完成數組包含json文件中所有返回結果的“ stedsnavn”功能。 因此，對於上面的示例，它應該是[Stavern，Stord]。

我根據網上找到的模板/教程構建了代碼。 當我現在運行它時，自動完成建議是“ totaltAntallTreff”功能，因此對於上面的json它將建議81280。

編輯：我真正需要知道的是如何正確查詢我現在僅具有response（data）的json。 我嘗試了幾種方法（$ .map，$。each），但是每當修改代碼時，它都不會給出自動完成建議。

請參閱下面的代碼

 $(function () { var getData = function (request, response) { $.getJSON( "https://ws.geonorge.no/SKWS3Index/ssr/json/sok?antPerSide=5&eksakteForst=false&navn=" + request.term + "*", function (data) { (response(data)); }); }; var selectItem = function (event, ui) { $("#myText").val(ui.item.value); return false; } $("#myText").autocomplete({ source: getData, select: selectItem, minLength: 1, change: function() { $("#myText").val("").css("display", 2); } }); }); 

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery.ui.autocomplete.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <div id="menu-container"> <input type="text" id="myText" /> </div> 

Answer 1

給定提供的JSON結構，您可以通過以下操作獲得結果：

 let json_data = { "sokStatus": { "ok": "true", "melding": "" }, "totaltAntallTreff": "81280", "stedsnavn": [{ "ssrId": "23149", "navnetype": "By", "kommunenavn": "Larvik", "fylkesnavn": "Vestfold", "stedsnavn": "Stavern", "aust": "214841.84", "nord": "6550500.29", "skrivemaatestatus": "Godkjent", "spraak": "NO", "skrivemaatenavn": "Stavern", "epsgKode": "25833" }, { "ssrId": "506202", "navnetype": "By", "kommunenavn": "Stord", "fylkesnavn": "Hordaland", "stedsnavn": "Stord", "aust": "-32194.93", "nord": "6665261.05", "skrivemaatestatus": "Godkjent", "spraak": "NO", "skrivemaatenavn": "Stord", "epsgKode": "25833" } ] } let values = json_data.stedsnavn.map(item => item.skrivemaatenavn); values.forEach(value => { $("#list").append(`<li>${value}</li>`); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="list"><ul> 

至於什么json_data.stedsnavn.map(item => item.skrivemaatenavn); 是在做：

json_data.stedsnavn.map(item => item.skrivemaatenavn);
         // Get the "stedsnavn" key from the data, an array
                   // Map each object in the array to
                                // its "skrivemaatenavn" key