如何解构 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