导航 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].

我根据我在网上找到的 template/tutorial 构建了我的代码。当我运行它现在自动完成建议是 "totaltAntallTreff" 功能所以对于上面的 json 它会建议 81280.

编辑：我真正需要知道的是如何正确查询我现在只有响应（数据）的 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

导航 json 文件以为 jquery 自动完成创建所需的数组

Navigating a json file to create desired array for jquery autocomplete

javascript

rest

jquery

json

autocomplete