如何在一个循环中在json中获得多个输出？

问题描述

我确实从URL中获取数据，并且从forE中获取了数据每个问题是innerHTML内部有2个div 与col-6，所以它将是1列中的2列，所以它看起来像这样-> sample image，但是我想在第二个div上获得数组的下一行是可能的，所以它将有2个不同的列数据

 fetch(URL)
.then(data=>data.json())
.then(data=>{
 data.forEach(datas => {
document.querySelector('.more-from').innerHTML += `
<div class="row related">

 <div class="col-md-6 col-lg-6">
  <a href="${datas.post_name}"><div class="post position-relative mb-4" style="background-image:url('${datas.image}'); height:175px;">
  </div></a>
  <a href="${datas.post_name}" rel="bookmark" title="Permanent Link to ${datas.post_title}" class="post-title"><span style="font-weight:bold; font-family:oswald,sans-serif !important;font-size: 17px; line-height: 22px; color: #333;">${datas.post_title} 
  </span></a>
 </div>

  <div class="col-md-6 col-lg-6">
  <a href="${datas.post_name}"><div class="post position-relative mb-4" style="background-image:url('${datas.image}'); height:175px;">
  </div></a>
  <a href="${datas.post_name}" rel="bookmark" title="Permanent Link to ${datas.post_title}" class="post-title"><span style="font-weight:bold; font-family:oswald,sans-serif !important;font-size: 17px; line-height: 22px; color: #333;">${datas.post_title} 
  </span></a>
 </div>

</div>`;

它只能获得第一个ID为10893的第一个ID。

解决方法

只需使用带有索引的常规for

for(let i = 0; i < data.length - 1; i = i + 2) {
    const div1Data = data[i];
    const div2Data = data[i+1]
    document.querySelector('.more-from').innerHTML += `...`
}

我会像@Onheiron所建议的那样使用普通的for循环，只有我会使用模检查来减少重复的代码。

例如

for(let i = 0; i < data.length - 1; i = i++) {

    if(i % 2 === 0)
        document.querySelector('.more-from').innerHTML += `<row>`;
   
    document.querySelector('.more-from').innerHTML += `<your element only once>`

    if(i % 2 === 0)
        document.querySelector('.more-from').innerHTML += `</row>`;
}

如果您将值设置为检查变量的模数，则还可以轻松地将其更改为3列。

arrays arrays foreach html javascript json