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

Posted 2023-05-08

【中文标题】导航 json 文件以创建 jquery 自动完成所需的数组

【英文标题】：Navigating a json file to create desired array for jquery autocomplete

【发布时间】：2019-12-14 15:53:57

【问题描述】：

我正在为包含挪威地名的搜索栏编写一个自动完成功能。

我从第三方提供的 REST api URL 收集数据。 输入“st”和两个结果的示例：

   "sokStatus":
      "ok":"true",
      "melding":""
   ,
   "totaltAntallTreff":"81280",
   "stedsnavn":[
      
         "s-s-rId":"23149",
         "navnetype":"By",
         "kommunenavn":"Larvik",
         "fylkesnavn":"Vestfold",
         "stedsnavn":"Stavern",
         "aust":"214841.84",
         "nord":"6550500.29",
         "skrivemaatestatus":"Godkjent",
         "spraak":"NO",
         "skrivemaatenavn":"Stavern",
         "epsgKode":"25833"
      ,
      
         "s-s-rId":"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。

编辑：我真正需要知道的是如何正确查询我现在只有响应（数据）的 json。我尝试了几种方法（$.map、$.each），但是每当我修改我的代码时，它最终都没有给出自动完成建议。

在下面查看我的代码

$(function () 
    var getData = function (request, response) 
        $.getJSON(
            "https://ws.geonorge.no/SKWS3Index/s-s-r/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>

【问题讨论】：

我无法让您的网址正常工作，但鉴于您发布的 JSON blob，我能够使用 response.stedsnavn.map(item => item.skrivemaatenavn); 从中获取所需的数组

@GammaGames 非常感谢，response(data.stedsnavn.map(item => item.skrivemaatenavn)); 为我做了：D

我很高兴！我会把它放到一个答案中，这样我们就可以结束这个问题了

【参考方案1】：

鉴于提供的 JSON 结构，您可以获得以下结果：

let json_data = 
  "sokStatus": 
    "ok": "true",
    "melding": ""
  ,
  "totaltAntallTreff": "81280",
  "stedsnavn": [
      "s-s-rId": "23149",
      "navnetype": "By",
      "kommunenavn": "Larvik",
      "fylkesnavn": "Vestfold",
      "stedsnavn": "Stavern",
      "aust": "214841.84",
      "nord": "6550500.29",
      "skrivemaatestatus": "Godkjent",
      "spraak": "NO",
      "skrivemaatenavn": "Stavern",
      "epsgKode": "25833"
    ,
    
      "s-s-rId": "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