0

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

Preetham
  • 5
  • 2
  • 1
    The obvious thing would be to introduce paging so that only a certain number of records from the dataset are fetched at any one time. An issue with your current code is that `innerHTML` concatenation re-parses the HTML each time which will have an effect on performance. You may want to `map` over the data to produce an array of HTML strings, and then use `innerHTML` once _after_ the iteration: `con.innerHTML = mappedHtml.join('')`, for example. – Andy Jul 02 '23 at 12:03
  • Maybe if you post (a little part of) the json it would be easier to help – luca.vercelli Jul 02 '23 at 12:36
  • `const info = (x) => con.innerHTML = x.messages.map(element => \`${element.creator.name}: ${element.text}
    \`).join('');` will work better since you are trusting innerHTML anyway     – mplungjan Jul 02 '23 at 12:40
  • [`innerHtml +=` is slow](https://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode) especially inside a loop – Bergi Jul 02 '23 at 12:59

2 Answers2

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.

Hristo Manov
  • 1
  • If you're doing iteration with DOM nodes you'll probably want to use a [document fragment](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment). – Andy Jul 02 '23 at 13:12
  • True, fragment is faster, but both are much faster then innerhtml – Hristo Manov Jul 02 '23 at 15:24
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 04 '23 at 07:00
-1

Try to load one element per time using the appending child. I leave here an alternative code.

Sandbox

The API https://dummyjson.com/products/1 test was used to get some dummy objects to be possible to 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>
Fabio Ribeiro de Carvalho
  • 661
  • 7
  • 21