如何从响应数组 json 动态地将数据插入 html 页面？

Question

我正在研究一个谷歌搜索引擎克隆并得到一系列结果。我正在运行一个 for 循环以将数据输入到 HTML 页面中，并且我在递增 ID 的同时对 ID 进行了编号。虽然此解决方案有效，但它并不是最佳的。如何根据结果数量动态插入数据？我正在使用普通的 JavaScript。

<div class="inside">
  <a id="myLink5" href="https://www.example.com">Example Link</a>
  <h1 id="titleinput5"></h1>
  <div>

    <p id="mydes5"> </p>

  </div>

</div>

var input = document.getElementById("searchbartext");
var inputValue = input.value;
const url2 = 'https://api.bing.microsoft.com/v7.0/search?q=' + inputValue + '&count=50';

// totalEstimatedMatches

console.log(url2);
fetch(url2, options)
  .then(response => response.json())
  .then(data => {
    console.log(data);
    element.style.display = 'block';
    var number = 1;
    for (var i = 0; i < 7; i++) {
      const title = data.webPages.value[i].name;
      const organicUrl = data.webPages.value[i].url;
      const image = data.webPages.value[i].snippet;
      const totalEstimatedMatches = data.webPages.totalEstimatedMatches;
      document.getElementById("number_of_results").innerHTML = totalEstimatedMatches;
      document.getElementById("titleinput" + number).innerHTML = title;


      //    titleinput.textContent = ;
      document.getElementById("mydes" + number).innerHTML = image;
      document.getElementById("myLink" + number).href = organicUrl;
      document.getElementById("myLink" + number).innerHTML = organicUrl;
      number++;
    }
  })

Answer 1

使用 document.createElement

下面我使用了示例响应数据，您可以使用您的获取方法中的逻辑。 同样遵循html结构

const container = document.getElementById('result');
const count = document.getElementById('count');
//api response data sample
const webPages ={
  totalEstimatedMatches:789456123,
  value:[
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    }
  ]
}

//count use outside the loop

count.innerText = webPages.totalEstimatedMatches;

for (var i = 0; i < 7; i++) {
      const title = webPages.value[i].name;
      const organicUrl = webPages.value[i].url;
      const des = webPages.value[i].snippet;
      const totalEstimatedMatches = webPages.totalEstimatedMatches;
      let div = document.createElement('div');
      let a = document.createElement('a');
      let h1 = document.createElement('h1');
      let p = document.createElement('p');
      a.href = organicUrl;
      a.innerText = organicUrl;
      h1.innerText = title;
      p.innerText = des
      div.append(a,h1,p);
      
      container.append(div)

}

<section>
<span>Count</span><h5 id='count'></h5>
<main id='result' class='result'>
  
</main>
</section>