Comment déconstruire un fichier json pour afficher tout le contenu du site ? Chaque fois que je charge tout en même temps, j'obtiens des milliers d'objets et Chrome plante.

Question

Chaque fois que je charge tout en même temps, j'obtiens des milliers d'objets et des plantages de Chrome.

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>";
    });
}

Voici mon code utilisant rn

Answer 1

Le premier innerhtml est très lent car il doit être analysé à chaque fois. Créez une fonction pour créer un élément Dom et attachez-le au conteneur souhaité. L'ajout d'une pagination ou de processus pour insérer des données en morceaux serait également utile.

Answer 2

Essayez d'utiliser les éléments enfants ajoutés pour charger un élément à la fois. J'ai laissé un code alternatif ici.

Bac à sable

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);
    }
  }
});

  
    Get API