Results Summary Component with JavaScript and Fetch API (JSON)

Community feedback

• 

  P

  markus•2,250

  @markuslewinPosted over 1 year ago

  One way to make the code simpler would be to first fetch the data, and then create the elements by iterating over the fetched array.

  That way, the data is fetched only once, and you don't have to repeat the logic for creating elements for each category.

  const getData = async () => {
  const response = await fetch("./scripts/data.json");
  const jsResponse = await response.json();
  return jsResponse;
  };
  
  getData().then((data) => {
  // Get Parent Container
  const parentContainer = document.querySelector(".container-actions");
  
  data.forEach((result) => {
  // create buttons, etc
  });
  });
  

  If you want a more declarative approach to creating the elements, you could write a <template> in the HTML, and then clone that template with JS. See <template>: The Content Template element.

  Marked as helpful

  0