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

以下是JSON链接。 http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json 在HTML中使用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>

我没关系，如果我可以只显示温度，城市，天气图标[下雨，晴天]，关于天气，高/低，风速和时间的文字说明。

来源

2017-07-07 Sidhant Sood

看，我只是不知道如何抓住这一个单一的东西来自html的数据，一旦我变得能够从我的html文件访问这个数据，休息我会做我自己 –

您可以访问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>

来源

2017-07-07 07:03:29

我不是要光顾，但我认为你正在寻找的词是解析。

开始通过解析更简单的东西：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

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

这将有助于提高你的信心，你会很高兴你采取风景路线，而不是跳第一。

来源

2017-07-07 06:50:41 user8158793

您可以发送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 
     }});

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

来源

2017-07-07 07:02:24

你可以使用我们已经从收到的结果解析json对象的'数据'acc需要属性。如果在获取预测房产数据时遇到任何困难，请告诉我。 –

可以使用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解码后的数据。

来源

2017-07-07 07:12:14

你能告诉我一个例子它会返回什么，以及如何把这个重新发布的数据放在JavaScript变量中。 –

检查您的控制台。 –

试试这个，它可以帮助你

的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"]); 
    } 
});

来源

2017-07-07 07:31:38

谢谢，谢谢....你救了我的一天... –

很高兴帮助:) –

请标记为未来参考答案 –

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

回答

相关问题