Как сохранить JSON в переменную для отображения в HTML?

Question

Используя API получаю ответ от сервера в виде JSON используя HttpClient

this.sessionService
      .getApiData(`https://api.openweathermap.org/data/2.5/weather?q=${this.town}&appid=${this.apikey}`)
      .subscribe(data => console.log(data), err => console.log(err));

и в консоли выводится всё, что мне нужно. Но стоит попытаться сохранить в переменную

this.sessionService
      .getApiData(`https://api.openweathermap.org/data/2.5/weather?q=${this.town}&appid=${this.apikey}`)
      .subscribe(data => this.weatherdata = data, err => console.log(err));

типа any и вывести её в HTML, то всё что выводится это [object Object] В лучшем случае хотелось бы получить доступ к каждому параметру JSON

Answer 1

Когда вы получаете JSON, вы должны его распарсить, так как он хранился строкой, возможно вам поможет. Почитать тут
Возможно вам также этот ответ поможет

const json = [{
    id: 1,
    name: 'Misha'
  },
  {
    id: 2,
    name: 'Valera'
  }
];

const serverJson = JSON.stringify(json);
const getJson = JSON.parse(serverJson); // получили с сервера JSON, распарсили
console.log(getJson);

const elem = document.querySelector('.elem');
getJson.forEach((object) => {
  elem.innerHTML += object.name;
});

<div class="elem"></div>

Answer 2

В ангуляре есть JsonPipe, который преобразит объект в json строку:

<p>{{ yourObject | json }}</p>

БЛОГ НА HUSL

Как сохранить JSON в переменную для отображения в HTML?

Ответы (2 шт):