简体   繁体   English

在 Z2705A83A83A5A0637EDA57426 中调用(来自 json php 文件)时,无法获取 obj 属性以显示在 html 页面上

[英]Cannot get obj property to show up on html page when called (from json php file) in ajax

Cant quite get it to the next level, please help.无法将其提升到一个新的水平,请帮助。 I am trying to get the temperature to print out as well right below the description on the html page using DOM and ajax which is pulling the data from a php file which storing it json format. I am trying to get the temperature to print out as well right below the description on the html page using DOM and ajax which is pulling the data from a php file which storing it json format. Not sure where the mistake is or if I am missing something.不知道错误在哪里,或者我是否遗漏了什么。 I know I made a mistake because I can do a console.log and see the data but cant figure out how to just get the "temp" and its property to html.Any help or pointers is much appreciated.我知道我犯了一个错误,因为我可以执行 console.log 并查看数据,但无法弄清楚如何将“temp”及其属性获取到 html。非常感谢任何帮助或指针。 Thank you all in advance!谢谢大家!

 -----------html-------------------
<body>
<h1 class="title">Todays Weather Forecast</h1>
<p class="sub">Click the button the check the local weather.</p>

<button class="demo-centered" type="button" onclick="loadPhp()">Check Weather</button><br><br>
<div id="content"></p>
<div id="content2"></p>
</body>
---------------javascript file ---------------------------------------------
function loadPhp() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 200) {
  var responseObject = JSON.parse(xhr.responseText);
  var newContent = '';
  var newContent2 = '';


  for (var i = 0; i < responseObject.weather.length; i++) {
    newContent += responseObject.weather[i].description;
  }

  for (var x in responseObject.main){
    console.log(x + ':' +responseObject.main[x]);
  }

  document.getElementById('content').innerHTML = "Description: " + newContent;
  document.getElementById('content2').innerHTML = "Temperature: " +response.Object.main[x];
   }
  };

  xhr.open('GET', 'demo.php', true);
  xhr.send(null);

 }
}
----------------PHP file---------------------
{
"coord": {
    "lon": -116.8,
    "lat": 33.03
},
"weather": [{
    "id": 802,
    "main": "Clouds",
    "description": "scattered clouds",
    "icon": "03d"
}],
"base": "stations",
"main": {
    "temp": 293.73,
    "feels_like": 289.89,
    "temp_min": 289.26,
    "temp_max": 295.93,
    "pressure": 1016,
    "humidity": 52
},
"visibility": 16093,
"wind": {
    "speed": 5.7,
    "deg": 260
},
"clouds": {
    "all": 40
},
"dt": 1589408840,
"sys": {
    "type": 1,
    "id": 5686,
    "country": "US",
    "sunrise": 1589374130,
    "sunset": 1589423903
},
"timezone": -25200,
"id": 5391832,
"name": "San Diego County",
"cod": 200
}

You have 2 errors in your code first is there is typo near response.Object.main[x].. this should be responseObject.main[x] .Also you have not close your </div> you have use </p> .您的代码中有 2 个错误,首先是response.Object.main[x]..这应该是responseObject.main[x]附近有错字。另外,您还没有关闭</div>你已经使用了</p> .

Working Code :工作代码

 var responseObject = { "coord": { "lon": -116.8, "lat": 33.03 }, "weather": [{ "id": 802, "main": "Clouds", "description": "scattered clouds", "icon": "03d" }], "base": "stations", "main": { "temp": 293.73, "feels_like": 289.89, "temp_min": 289.26, "temp_max": 295.93, "pressure": 1016, "humidity": 52 }, "visibility": 16093, "wind": { "speed": 5.7, "deg": 260 }, "clouds": { "all": 40 }, "dt": 1589408840, "sys": { "type": 1, "id": 5686, "country": "US", "sunrise": 1589374130, "sunset": 1589423903 }, "timezone": -25200, "id": 5391832, "name": "San Diego County", "cod": 200 }; var newContent = ''; var newContent2 = ''; for (var i = 0; i < responseObject.weather.length; i++) { newContent += responseObject.weather[i].description; } for (var x in responseObject.main) { //console.log(x + ':' + responseObject.main[x]); } document.getElementById('content').innerHTML = "Description: " + newContent; document.getElementById('content2').innerHTML = "Temperature: " + responseObject.main[x];//change here
 <div id="content"> </div> <!--close div--> <div id="content2"> </div> <!--close div-->

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM