如何解構 json 檔案以顯示網站中的所有內容？每次我一次加載所有內容時，都會有數千個物件和 chrome 崩潰

Question

每次我一次加載所有內容時，都會出現數千個物件和 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>";
    });
}

這是我使用 rn 的程式碼

Answer 1

第一個innerhtml因為每次都要解析所以很慢。建立一個函數來建立 Dom 元素並將其附加到所需的容器。新增分頁或流程以按區塊插入資料也會有所幫助。

Answer 2

嘗試使用附加子元素每次載入一個元素。 我在這裡留下了一個替代代碼。

沙箱

#

程式碼

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