how to render diff elements at once in vanila js

i have this api data what i want to have 7 diff p tags and every p tags should have maxtemp_c value how to achive this

7 Replies

13eck•2y ago

Assuming that's an array of data, you could do something like this:

const data = []; // this is the result of the API call
// the .map() method creates a new array from data in
// the old array without changing the existing array
const toInject = data.map( (el) => { 
  // here we create a new paragraph element
  const p = document.createElement("p");
  // and set the text to be the data you  want
  p.textContent = `${el.day.maxtemp_c}ºC`;
  // return the element to be added to the new array
  return p;
});

// selecting the element we want to append to
// then using the spread operator to add all elements
// created above to the parent element
document.querySelector(".append-here").append(...toInject);

const data = []; // this is the result of the API call
// the .map() method creates a new array from data in
// the old array without changing the existing array
const toInject = data.map( (el) => { 
  // here we create a new paragraph element
  const p = document.createElement("p");
  // and set the text to be the data you  want
  p.textContent = `${el.day.maxtemp_c}ºC`;
  // return the element to be added to the new array
  return p;
});

// selecting the element we want to append to
// then using the spread operator to add all elements
// created above to the parent element
document.querySelector(".append-here").append(...toInject);

SirPHOBIAOP•2y ago

index.js:48 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'maxtemp_c')

13eck•2y ago

You have to wait for the promise to resolve

SirPHOBIAOP•2y ago

13eck•2y ago

You’ll have to log the data, make sure it’s the way you expect it and make changes as needed I’m at work so I can’t be that helpful right now. Won’t be home for about 7hrs

SirPHOBIAOP•2y ago

No worries i'll figure it out

13eck•2y ago

Ok, so I found the error: you're pushing the entire data.forecast.forecastday array into only one element of arr so there's nothing to loop over. Don't use an intermediate array, instead:

const toInject = data.forecast.forecastday.map()

const toInject = data.forecast.forecastday.map()

That way you map over the array given. In addition, for the future, please use codeblock syntax when sharing code, it makes it a lot easier to read as well as copy/paste. See #How To Ask Good Questions for the syntax.

Gaming

Programming

how to render diff elements at once in vanila js