Как использовать document.getElementById (). TextContent для вложенных данных JSON? - PullRequest
Новая
       11

Как использовать document.getElementById (). TextContent для вложенных данных JSON?

1 голос
/ 18 июня 2020

Я пытаюсь получить доступ к некоторым вложенным данным из API OpenWeatherMap, вот пример того, что я использую: 

{
   "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?

Ответы [ 2 ]

1 голос
/ 18 июня 2020

Вы можете получить доступ к этому объекту следующим образом 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>

Надеюсь, это поможет.

0 голосов
/ 18 июня 2020 
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.

...