微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何在一个循环中在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。

Console log of data

解决方法

只需使用带有索引的常规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列。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。