Question

这是JSON的链接。 http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json

此JSON文件提供有关天气的数据

我想通过上面的链接将这些数据显示在我的HTML文件中。我是第一次使用JSON。所以我需要帮助将这个JSON文件链接到我的HTML文档中。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
</head>

<body>

<div class="wrapper">
<span id="temp"></span>
<span id="high"></span>
<span id="low"></span>
<span id="windspeed"></span>
<span id="description"></span>
<span id="city"></span>
<span id="iconorimage"></span>
<span id="time"></span>
<span id="any thing else"></span>
</div>
</body>
</html>

我很好，如果我只能显示温度，城市，天气图标[下雨，晴天]，有关天气，高/低，风速和时间的文字说明。

Answer 1

您可以访问json对象，类似于在javascript中访问对象属性的方式。

$.ajax({
  dataType: "json",
  url:"//api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json",
  success: function(data){
    $('#city').text("City : " + data["current_observation"]["display_location"]["city"]);
    $('#high').text("High : " + "");//Insert data for high here
    $('#low').text("Low : " +""); //Insert data for low here
    $('#temp').text("Tempearature : " + data["current_observation"]["temperature_string"]);
    $('#description').text("Description : " + data["current_observation"]["icon"]);
    $('<img />').attr('src',data["current_observation"]["icon_url"]).appendTo($("#iconorimage"));
  $('#windspeed').text('WindSpeed : ' + data["current_observation"]["wind_kph"]);
  $('#time').text('Time : ' + data["current_observation"]["observation_time"]);
  }
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<span id="temp"></span><br/>
<span id="high"></span><br/>
<span id="low"></span><br/>
<span id="windspeed"></span><br/>
<span id="description"></span><br/>
<span id="city"></span><br/>
<span id="iconorimage"></span><br/>
<span id="time"></span><br/>
<span id="any thing else"></span><br/>
</div>
</body>
</html>

Answer 2

您可以使用Ajax来加载数据。

参见示例，

function getJson(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(JSON.parse(this.responseText));
        }
    };
    xhttp.open("GET", "http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json", true);
    xhttp.send();
}
getJson();

它将返回JSON解码数据。

Answer 3

试试这个，它可以帮到你

jsFiddle也一样 https://jsfiddle.net/sd0zc43j/3/

使用下面的ajax调用

$.ajax({
  dataType: "json",
  url:"//api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json",
  success: function(data){       
   $('#city').html("City : " + data["current_observation"]["display_location"]["city"]);
   $('#high').html("High Fahrenheit: " + data["forecast"]["simpleforecast"]["forecastday"][0]["high"]["fahrenheit"] + " & Celsius: " + data["forecast"]["simpleforecast"]["forecastday"][0]["high"]["celsius"]);
   $('#low').html("Low Fahrenheit: " + data["forecast"]["simpleforecast"]["forecastday"][0]["low"]["fahrenheit"] + " & Celsius: " + data["forecast"]["simpleforecast"]["forecastday"][0]["low"]["celsius"]);
   $('#temp').html("Tempearature : " + data["current_observation"]["temperature_string"]);
   $('#windspeed').html("Wind Speed : " + data["current_observation"]["wind_string"]);
   $('#description').html("Description : " + data["current_observation"]["icon"]);
   // $('#iconorimage').html("Icon URL : " + data["current_observation"]["icon_url"]);
   $('#img').attr("src",data["current_observation"]["icon_url"]);
  }
});

Answer 4

我不是故意要光顾，但我认为你要找的那个词是解析的。

首先解析更简单的事情：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JSON.parse（）方法解析JSON字符串，构造字符串描述的JavaScript值或对象。

这将有助于增强你的信心，你会很高兴你采取风景优美的路线，而不是先跳头。

Answer 5

您可以向此网址发送ajax请求

    $.ajax({url: "http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json", success: function(result){
            var data=JSON.Parse(result);
//and then you can access each of the property of json object for example
            data.current_observation.observation_location.city;

//but yes you might need to loop through to access like periods in forecast 
        }});

让我知道我是否指示你正确的方向？那就是你想要的？如果您需要进一步澄清，请告诉我。感谢

在HTML中使用JSON脚本并显示数据

5 个答案: