Json to Array using javascript xhttp

Question

所以我使用 js xhttp 从 API 获取一个 Json 字符串，打赌我似乎无法将 json 转换为数组以指定值。

我尝试过使用 JSON.parse（），但它总是返回 [对象对象]。每当我不使用 JSON.parse（） 时，它都会给出 json 的字符串版本。

这是从 API 获取 json 的代码：

function showHint(str) {
  var xhttp;
  if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var obj = JSON.parse(this.responseText);
      //alert(obj)
      //document.getElementById("txtHint").innerHTML = obj;
      document.getElementById("txtHint").innerHTML = obj ;
    }
  };
  xhttp.open("GET", "https://geodata.nationaalgeoregister.nl/locatieserver/v3/suggest?q=type:adres%20"+str, true);
  xhttp.send();
}

对于 html：

<form action="">
   <input type="text" id="txt1" onkeyup="showHint(this.value)" placeholder="test"/>
</form>
<span id="txtHint"></span>

下面是 API 的示例 URL：https://geodata.nationaalgeoregister.nl/locatieserver/v3/suggest?q=type:adres%20haviklaan

我想隔离所有"weergavenaam"值。如果 JSON 给出 "weergavenaam"："Haviklaan 1A， Katwijk" 我想要 "Haviklaan 1A， Katwijk" 部分作为字符串。

Answer 1

您需要更

深入地研究对象并map() docs数组，以获得所需的weergavenaam值数组。 map() 会给你一个值数组，如果你想要一个字符串，你可以使用类似 join() ：

let obj = {"response":{"numFound":258,"start":0,"maxScore":12.414675,"docs":[{"type":"adres","weergavenaam":"Haviklaan 1A, Katwijk","id":"adr-d10af16641607326ce22354641c07c5c","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 1T, Katwijk","id":"adr-e5dfad15bdd9db8aac42138d3c4dee3c","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 11A, Katwijk","id":"adr-e886a238089b5ea455a204189576814c","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 13A, Katwijk","id":"adr-9b001e099efc6555542269e64fc0c61a","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 23A, Katwijk","id":"adr-d9c85d4b6cb3a635921219e0e35b1852","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 25A, Katwijk","id":"adr-30f73ed847865b7ee7d5da1c8aeb4cbc","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 35A, Katwijk","id":"adr-2de61dda0a2bd7876580570af388d10c","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 37A, Katwijk","id":"adr-df3596c0fb92d665cef1ca68ed664c7f","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 47A, Katwijk","id":"adr-03e73c776f0d8169b97e15607afc09cb","score":12.414675},{"type":"adres","weergavenaam":"Haviklaan 49A, Katwijk","id":"adr-7a08cb658d9b037aee69ec1ca7cb4b7f","score":12.414675}]},"highlighting":{"adr-d10af16641607326ce22354641c07c5c":{"suggest":["<b>Haviklaan</b> 1A, Katwijk"]},"adr-e5dfad15bdd9db8aac42138d3c4dee3c":{"suggest":["<b>Haviklaan</b> 1T, Katwijk"]},"adr-e886a238089b5ea455a204189576814c":{"suggest":["<b>Haviklaan</b> 11A, Katwijk"]},"adr-9b001e099efc6555542269e64fc0c61a":{"suggest":["<b>Haviklaan</b> 13A, Katwijk"]},"adr-d9c85d4b6cb3a635921219e0e35b1852":{"suggest":["<b>Haviklaan</b> 23A, Katwijk"]},"adr-30f73ed847865b7ee7d5da1c8aeb4cbc":{"suggest":["<b>Haviklaan</b> 25A, Katwijk"]},"adr-2de61dda0a2bd7876580570af388d10c":{"suggest":["<b>Haviklaan</b> 35A, Katwijk"]},"adr-df3596c0fb92d665cef1ca68ed664c7f":{"suggest":["<b>Haviklaan</b> 37A, Katwijk"]},"adr-03e73c776f0d8169b97e15607afc09cb":{"suggest":["<b>Haviklaan</b> 47A, Katwijk"]},"adr-7a08cb658d9b037aee69ec1ca7cb4b7f":{"suggest":["<b>Haviklaan</b> 49A, Katwijk"]}},"spellcheck":{"suggestions":[],"collations":[]}}
let weergavenaam = obj.response.docs.map(obj => obj.weergavenaam)
console.log(weergavenaam.join(', '))

Answer 2

也许你只需要输入第一个对象的完整路径，如下所示：

document.getElementById("txtHint").innerHTML = obj.response.docs[0].weergavenaam;