来自URL的简单JSON请求

时间:2017-05-11 15:55:21

标签: jquery html json

我已经在留言板上滚动了几天但是我似乎无法让这个工作......我是JSON的新手而我正试图回归一个URL中此对象的值,但似乎甚至无法让我的演示工作:(

任何关于如何解决这个问题的建议都会非常感激,我想它很简单,但我不能错过,但我不能为我的生活弄清楚它是什么。谢谢!



var text = $.getJSON('https://api.waqi.info/feed/london/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246', function(data) {
});


obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.data[0].aqi;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Output</h2>
<p id="demo"></p>
&#13;
&#13;
&#13;

编辑:

这是对象:

&#13;
&#13;
{  
   "status":"ok",
   "data":{  
      "aqi":111,
      "idx":5724,
      "attributions":[  
         {  
            "url":"http://uk-air.defra.gov.uk/",
            "name":"UK-AIR, air quality information resource - Defra, UK"
         },
         {  
            "url":"http://londonair.org.uk/",
            "name":"London Air Quality Network - Environmental Research Group, King's College London"
         }
      ],
      "city":{  
         "geo":[  
            51.5073509,
            -0.1277583
         ],
         "name":"London",
         "url":"http://aqicn.org/city/london/"
      },
      "dominentpol":"pm25",
      "iaqi":{  
         "co":{  
            "v":0.1
         },
         "h":{  
            "v":45
         },
         "no2":{  
            "v":70.5
         },
         "o3":{  
            "v":15
         },
         "p":{  
            "v":995
         },
         "pm10":{  
            "v":50
         },
         "pm25":{  
            "v":111
         },
         "so2":{  
            "v":5.7
         },
         "t":{  
            "v":19.23
         }
      },
      "time":{  
         "s":"2017-05-11 15:00:00",
         "tz":"+00:00",
         "v":1494514800
      }
   }
}
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

您需要将您希望在完成JSON请求后运行的代码移动到$.getJSON()方法的成功函数中。

您也不需要解析JSON,就像为您完成的那样。

&#13;
&#13;
$.getJSON('https://api.waqi.info/feed/london/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246', function(data) {
    document.getElementById("demo").innerHTML = data.data.aqi;
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Output</h2>
<p id="demo"></p>
&#13;
&#13;
&#13;

此代码需要移动的原因是JavaScript会移动到$.getJSON()之外的代码,而它仍在等待来自它的请求的响应 - 这意味着您需要< em>等待直到它完成。值得研究异步JavaScript以及Promise的想法。

答案 1 :(得分:0)

这里有很多问题。

首先,根据jQuery docs for $.getJSON,该方法不会返回获取的JSON。它返回为发出请求而生成的jqXHR$.getJSON是一个异步函数,您可以传递一个回调函数,该函数将在所述获取完成后接收所获取的数据。您也可以使用返回的jqXHR在成功后通过promise API运行代码,但我们不会在此处深入研究。所有这一切意味着:

  1. 您尝试解析的text变量实际上是jqXHR的实例,而不是JSON字符串。
  2. 在调用$.getJSON之后执行的行甚至在从服务器返回JSON之前执行。
  3. 其次,如果成功,$.getJSON不需要您在获取后解析JSON。 jQuery在内部处理,因此您成功获得的是已经解析的本机JavaScript数据结构。

    第三,您返回的结构在data属性中不包含数组,因此obj.data[0].aqi永远不会起作用,因为您尝试从{{1}访问不存在的索引0 }}。 dataaqi对象的属性,因此您需要data

    将所有这些放在一起,以下基本示例应该让您感动:

    obj.data.aqi

答案 2 :(得分:0)

使用回调方法访问响应。

&#13;
&#13;
$.getJSON('https://api.waqi.info/feed/london/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246', function(data) {
	if( data.status == 'ok' ) {
  	document.getElementById("demo").innerHTML = data.data.aqi;
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Output</h2>
<p id="demo"></p>
&#13;
&#13;
&#13;