0

I have an API get request that looks like this 

axios.get(FULL_API_URL).then(response => {
  const weatherApp = document.getElementById('container');
  const apiResponse = response.data.list; // Rename API response

  apiResponse.map(city => {

    console.log('cityName', city.name);
    console.log('cityTemp', city.main.temp);

    `<h1>${city.name}</h1>`
  }).join('');
  weatherApp.innerHTML = apiResponse;
});

my console.log reponse is cityName Aucklandand cityTemp 11 however, in my DOM all that is rendered is [OBJECT, OBJECT], my console.log works just fine so i'm not really sure whats going wrong?

Ali Ilman
  • 180
  • 2
  • 11
invrt
  • 689
  • 6
  • 24
  • 2
    `.map` does not mutate the existing array. Assign the result to a new variable instead, and `return` the new value in the `.map` callback, and your code will work – CertainPerformance Aug 18 '19 at 06:18
  • 1
    assign .map to a new variable and then set it to innerHTML, the second error is you are not returning anything inside map so map returns an array of undefined and you don't need to join array you can pass an array to innerHTML and it works like a charm – Amir Tahani Aug 18 '19 at 06:20

0 Answers0