如何对嵌套的 JSON 数据使用 document.getElementById().textContent?
How to use document.getElementById().textContent for nested JSON data?
我正在尝试从 OpenWeatherMap 的 API 访问一些嵌套数据,这是我正在使用的示例:
{
"coord":{
"lon":-74.46,
"lat":40.55
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01d"
}
],
"base":"stations",
"main":{
"temp":67.93,
"feels_like":68.72,
"temp_min":64.99,
"temp_max":70,
"pressure":1022,
"humidity":77
},
"visibility":16093,
"wind":{
"speed":4.7,
"deg":100
},
"clouds":{
"all":1
},
"dt":1592439281,
"sys":{
"type":1,
"id":5874,
"country":"US",
"sunrise":1592386010,
"sunset":1592440257
},
"timezone":-14400,
"id":0,
"name":"Piscataway",
"cod":200
}
现在,在我从 API 获取数据的函数内部,我正在尝试执行以下操作:
var weatherURL = 'http://api.openweathermap.org/data/2.5/weather?zip=08854,us&appid=(api key hidden for privacy)&units=imperial';
async function getWeather() {
const response = await fetch(weatherURL);
const data = await response.json();
console.log(data);
const {name, temp} = data;
document.getElementById('currentCity').textContent = name;
document.getElementById('temp').textContent = data["main"]["temp"];
}
.textContent = name 的工作方式与我预期的一样,但是我该如何更正我的函数的最后一行以便我可以访问 main.temp 例如?
您可以像这样访问该对象 data.main.temp
并像这样命名 data.name
简化的 jQuery 代码:
var weatherURL = 'http://api.openweathermap.org/data/2.5/weather?zip=08854,us&appid=(api key hidden for privacy)&units=imperial';
async function getWeather() {
const response = await fetch(weatherURL);
const data = await response.json();
console.log(data);
//Append Results
$('#currentCity').html(data.name)
$('#temp').html(data.main.temp)
}
var data = {
"coord":{
"lon":-74.46,
"lat":40.55
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01d"
}
],
"base":"stations",
"main":{
"temp":67.93,
"feels_like":68.72,
"temp_min":64.99,
"temp_max":70,
"pressure":1022,
"humidity":77
},
"visibility":16093,
"wind":{
"speed":4.7,
"deg":100
},
"clouds":{
"all":1
},
"dt":1592439281,
"sys":{
"type":1,
"id":5874,
"country":"US",
"sunrise":1592386010,
"sunset":1592440257
},
"timezone":-14400,
"id":0,
"name":"Piscataway",
"cod":200
}
//Append Results
$('#currentCity').html(data.name)
$('#temp').html(data.main.temp)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="weather_details">
</div>
<h3>Current Weather for <span id="currentCity"></span>
</h3><div class="weather_details">
<p>Temperature: <span id="temp"></span>
</p>
</div>
希望这对您有所帮助。
var weatherURL = 'http://api.openweathermap.org/data/2.5/weather?zip=08854,us&appid=(api key hidden for privacy)&units=imperial';
async function getWeather() {
const response = await fetch(weatherURL);
const data = await response.json();
console.log(data);
const {name, main: { temp }} = data; // Destructuring
document.getElementById('currentCity').textContent = name;
document.getElementById('temp').textContent = temp; // Same with name example above
}
你能试试这个吗?
没有太多改变你的代码。
注意:您也可以使用 temp.toFixed(1)
表示温度,因为 67.9 而不是 67.93。
我正在尝试从 OpenWeatherMap 的 API 访问一些嵌套数据,这是我正在使用的示例:
{
"coord":{
"lon":-74.46,
"lat":40.55
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01d"
}
],
"base":"stations",
"main":{
"temp":67.93,
"feels_like":68.72,
"temp_min":64.99,
"temp_max":70,
"pressure":1022,
"humidity":77
},
"visibility":16093,
"wind":{
"speed":4.7,
"deg":100
},
"clouds":{
"all":1
},
"dt":1592439281,
"sys":{
"type":1,
"id":5874,
"country":"US",
"sunrise":1592386010,
"sunset":1592440257
},
"timezone":-14400,
"id":0,
"name":"Piscataway",
"cod":200
}
现在,在我从 API 获取数据的函数内部,我正在尝试执行以下操作:
var weatherURL = 'http://api.openweathermap.org/data/2.5/weather?zip=08854,us&appid=(api key hidden for privacy)&units=imperial';
async function getWeather() {
const response = await fetch(weatherURL);
const data = await response.json();
console.log(data);
const {name, temp} = data;
document.getElementById('currentCity').textContent = name;
document.getElementById('temp').textContent = data["main"]["temp"];
}
.textContent = name 的工作方式与我预期的一样,但是我该如何更正我的函数的最后一行以便我可以访问 main.temp 例如?
您可以像这样访问该对象 data.main.temp
并像这样命名 data.name
简化的 jQuery 代码:
var weatherURL = 'http://api.openweathermap.org/data/2.5/weather?zip=08854,us&appid=(api key hidden for privacy)&units=imperial';
async function getWeather() {
const response = await fetch(weatherURL);
const data = await response.json();
console.log(data);
//Append Results
$('#currentCity').html(data.name)
$('#temp').html(data.main.temp)
}
var data = {
"coord":{
"lon":-74.46,
"lat":40.55
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01d"
}
],
"base":"stations",
"main":{
"temp":67.93,
"feels_like":68.72,
"temp_min":64.99,
"temp_max":70,
"pressure":1022,
"humidity":77
},
"visibility":16093,
"wind":{
"speed":4.7,
"deg":100
},
"clouds":{
"all":1
},
"dt":1592439281,
"sys":{
"type":1,
"id":5874,
"country":"US",
"sunrise":1592386010,
"sunset":1592440257
},
"timezone":-14400,
"id":0,
"name":"Piscataway",
"cod":200
}
//Append Results
$('#currentCity').html(data.name)
$('#temp').html(data.main.temp)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="weather_details">
</div>
<h3>Current Weather for <span id="currentCity"></span>
</h3><div class="weather_details">
<p>Temperature: <span id="temp"></span>
</p>
</div>
希望这对您有所帮助。
var weatherURL = 'http://api.openweathermap.org/data/2.5/weather?zip=08854,us&appid=(api key hidden for privacy)&units=imperial';
async function getWeather() {
const response = await fetch(weatherURL);
const data = await response.json();
console.log(data);
const {name, main: { temp }} = data; // Destructuring
document.getElementById('currentCity').textContent = name;
document.getElementById('temp').textContent = temp; // Same with name example above
}
你能试试这个吗? 没有太多改变你的代码。
注意:您也可以使用 temp.toFixed(1)
表示温度,因为 67.9 而不是 67.93。