Question 198898 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I destructure a json file to show all content in a site? There are thousands of objects and chrome crashes every time I load everything at once

There are thousands of objects and chrome crashes every time I load everything at once.

btn.addEventListener('click', function(){
    event.preventDefault();

async function getData(){
    const response=await fetch(url)
    const data= await response.json();
    info(data)
}

getData();

function info(x){
    x.messages.forEach(element => {
        console.log(element.creator.name+": "+element.text)
    // console.log(x.element.text)
    con.innerHTML += "<p>"+element.creator.name+": "+element.text+"</p>";
    });
}

This is the code im using rn

Tags:

2

Answers


  1. 0

    First innerhtml is slow because of parsing every time. Create a function to create Dom element and append it to the desired container. Adding paging or a flow to insert data in chunks can help too.

    Login or Signup to reply.
  2. 0

    I created a Sandbox to try to simulate what the ask explained:
    https://codesandbox.io/s/html-css-js-4jc8qh?file=/script.js

    The API https://dummyjson.com/products/1 test was used to get some dummy object to be possible get some information to test

    The code

    const btn = document.getElementById("BtnInfo");
btn.addEventListener("click", function (event) {
  event.preventDefault();

  async function getData() {
    const response = await fetch("https://dummyjson.com/products/1");
    const data = await response.json();

    info(data);
  }

  getData();

  function info(x) {
    for (let key in x) {
      var pElement = document.createElement("p");
      pElement.textContent = `${key}: ${x[key]}`;
      document.body.appendChild(pElement);
    }
  }
});
      <body>
    <button id="BtnInfo">Get API</button>
  </body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search