在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腳本並顯示數據

回答

相關問題