Bagaimanakah saya boleh menyahbina fail json untuk memaparkan semua kandungan dalam tapak? Setiap kali saya memuatkan semuanya serentak, saya mendapat beribu-ribu objek dan ranap sistem krom

Question

Setiap kali saya memuatkan semuanya sekaligus, saya mendapat beribu-ribu objek dan ranap krom.

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

Ini kod saya menggunakan rn

Answer 1

Innerhtml pertama sangat lambat kerana perlu dihuraikan setiap masa. Cipta fungsi untuk mencipta elemen Dom dan pasangkannya pada bekas yang dikehendaki. Menambah penomboran atau proses untuk memasukkan data dalam ketulan juga akan membantu.

Answer 2

Cuba gunakan elemen anak yang ditambahkan untuk memuatkan satu elemen pada satu masa. Saya telah meninggalkan kod alternatif di sini.

Kotak pasir

Kod

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