Проблема:
Как обсуждал Райан Уилсон, проблема, с которой вы сталкиваетесь, заключается в том, что вы пытаетесь получить доступ к параметрам, которые отсутствуют в свойстве погоды вашего JSON, покаВы просматриваете погоду.Чтобы помочь вам понять это, рассмотрите следующий JSON (усеченный из используемого вами API):
data = {
weather: [
{
id: 721,
main: "Haze",
description: "haze",
icon: "50n"
},
{
id: 300,
main: "Drizzle",
description: "light intensity drizzle",
icon: "09n"
},
{
id: 701,
main: "Mist",
description: "mist",
icon: "50n"
}
],
base: "stations",
main: {
temp: 278.37,
pressure: 1023,
humidity: 87,
temp_min: 276.15,
temp_max: 280.15
}
id: 2643743,
name: "London",
cod: 200
};
У этого объекта JSON есть несколько уровней.Если я хочу получить доступ к туманной погоде, мне придется использовать data.weather [2] .main, который будет возвращать «Mist».Это потому, что я получаю свойство 'main' из третьего элемента массива погоды.
Теперь, если бы я попытался получить значение temp с помощью data.weather [2] .main.temp, он ничего не вернет, потому что под третьим погодным объектом нет свойства 'temp'.Однако в главном объекте в корне объекта данных есть временное свойство.Чтобы получить доступ к этому, вам необходимо использовать data.main.temp.
Как это относится к вашему коду?
Если вы посмотрите на свой код, выпереберите массив data.weather, используя:
data.weather.forEach(weather => {
//...
});
Для каждой итерации этого блока переменная 'weather' будет равняться одному из объектов в массиве data.weather.Так что, если бы вы использовали:
data.weather.forEach(weather => {
console.log(weather.main);
});
Вы бы получили «Дымка», затем «Морось», затем «Туман».(На основе JSON, который я показал выше).
Я полагаю, вы многое выяснили, но затем вы попытались получить температуру, используя weather.main.temp, который не является допустимым параметром.Вместо этого вам придется использовать data.main.temp.
Надеюсь, это немного прояснит для вас JSON.
Реальный ответ:
Реальный ответ на ваш вопрос "Почему он показывает только одну пару ключ-значение?"на самом деле не имеет ничего общего с тем, что я сказал выше.Если бы вы посмотрели на JSON, который API отправлял при публикации вопроса, вы бы увидели, что в массиве погоды был только один объект.На момент написания статьи их было три.Ваш код будет создавать только столько карт, сколько есть элементов в массиве погоды.
Обязательно обратитесь к JSFiddle Райана Уилсона здесь: https://jsfiddle.net/ep84so9m/2/ Он изменил ваш код, чтобы сделать то, что кажется, что вы былипосле.
Надеюсь, это поможет!