Javascript json api 调用

Question

我想对 JSON 进行 api 调用（https://maps.googleapis.com/maps/api/geocode/json?address=Pune），通过向其传递城市名称（硬编码）并获取返回的纬度和经度。我已经尝试过下面提到的代码。

function loadJSON(callback) {

  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open("GET", "https://maps.googleapis.com/maps/api/geocode/json?address=Pune", true);
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(xobj.responseText);
    };
    xobj.send();
  }

  function init() {
    loadJSON(function(response) {
      // Parse JSON string into object
      var myObj = JSON.parse(this.responseText);

      alert(myObj.results[0].geometry.bounds.northeast.lat);
      alert(myObj.results[0].geometry.bounds.northeast.lng);
      alert(myObj.results[0].geometry.bounds.southwest.lat);
      alert(myObj.results[0].geometry.bounds.southwest.lng);
      alert(myObj.results[0].geometry.location.lat);
      alert(myObj.results[0].geometry.location.lng);

      alert(myObj.results[0].geometry.viewport.northeast.lat);
      alert(myObj.results[0].geometry.viewport.northeast.lng);
      alert(myObj.results[0].geometry.viewport.southwest.lat);
      alert(myObj.results[0].geometry.viewport.southwest.lng);

    });
  }

Answer 1

您的代码中存在一些问题：

1. 您缺少

   loadJSON

   的右大括号。

2. xobj.send()

   位于错误的位置...它需要位于

   onreadystatechange

   函数之外。
3. 您在回调中使用了

   this.responseText

   而不是您传入的参数。

我修复了这些问题，将

alert

转换为

console.log

，并摆脱了不必要的

overrideMimeType

调用。工作代码如下：

function loadJSON(callback) {

  var xobj = new XMLHttpRequest();
  xobj.open("GET", "https://maps.googleapis.com/maps/api/geocode/json?address=Pune", true);
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(xobj.responseText);
    };
  }
  xobj.send();
}

function init() {
  loadJSON(function(responseText) {
      var myObj = JSON.parse(responseText);

      console.log(myObj.results[0].geometry.bounds.northeast.lat);
      console.log(myObj.results[0].geometry.bounds.northeast.lng);
      console.log(myObj.results[0].geometry.bounds.southwest.lat);
      console.log(myObj.results[0].geometry.bounds.southwest.lng);
      console.log(myObj.results[0].geometry.location.lat);
      console.log(myObj.results[0].geometry.location.lng);

      console.log(myObj.results[0].geometry.viewport.northeast.lat);
      console.log(myObj.results[0].geometry.viewport.northeast.lng);
      console.log(myObj.results[0].geometry.viewport.southwest.lat);
      console.log(myObj.results[0].geometry.viewport.southwest.lng);

    });
}

init();

Answer 2

试试这个：

async function Function() {
   const url = "api.website.org"
   const response = await fetch(url)
   const data = await response.json()
   const {JSONData} = data;
    console.log (data)

    document.getElementById("somedivelement").textContent = JSONData
}
Function()

但就你而言：

   const url = "https://maps.googleapis.com/maps/api/geocode/json?address=Pune"
  const {results} = data