Json to Array使用JavaScript xhttp

Question

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

我尝试使用JSON.parse（），但它始终返回[object object]。 每当我不使用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

您需要深入研究对象，然后在docs数组上进行map()以获得所需的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;