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;