Javascript 循环数据并使用数据创建html元素

我正在从php脚本获取json数据，并尝试在网页上显示数据。我遇到的问题是我想限制

中
• 标记的数量，如果满足限制，那么我想创建一个新的
  元素
  JSON:
  我尝试了循环，但得到了奇怪的结果，代码：

  function getWidgetList() {
  let widgetListURL = 'php/list.php';
  fetch(widgetListURL)
      .then((response) => response.json())
      .then((data) => {
          let html = '';
          html += `<ul class="col-sm-2 list-unstyled"><li><p class="title">Widgets:</p></li>`;
          let counter = 0;
          let limit = 3;
          for (let key in data) {
              let widget = data[key];
              html += '<li data-desk="' + widget.mReference + '"><a><span class="d-title">' + widget['mDescription'] + '</span></a></li>';
              if (++counter > limit) {
                  html += `</ul><ul class="col-sm-2 list-unstyled">
                  <li><p class="title">Widgets:</p></li>`;  
                   counter = 0;                             
               }
          }
              html += `</ul>`;
             //byID('widgetList').innerHTML(html);
             console.log(html);
      })
  }
  

  函数getWidgetList（）{ 让widgetListURL='php/list.php'； 获取（widgetListURL） .then（（response）=>response.json（）） 。然后（（数据）=>{ 让html=''； html+=`

  • 小部件：

  • `； 设计数器=0； 设极限=3； for（让我们输入数据）{ 让widget=data[key]； html++=''+widget['mDescription']+'
  '； 如果（++计数器>限制）{ html+=`
  • 小部件：

  `； 计数器=0； } } html+=`
  `； //byID（'widgetList'）.innerHTML（html）； log（html）； }) } 结果:

  <ul class="col-sm-2 list-unstyled"><li><p class="title">Widget:</p></li>
   <li data-desk="rwid"><a><span class="d-title">Red Widget</span></a></li>
   <li data-desk="bwid"><a><span class="d-title">Blue Widget</span></a></li> 
   <li data-desk="ywid"><a><span class="d-title">Yellow Widget</span></a></li> 
   <li data-desk="owid"><a><span class="d-title">Orange Widget</span></a></li> 
  </ul>
  <ul class="col-sm-2 list-unstyled"><li><p class="title">Widget:</p></li>
   <li data-desk="gwid"><a><span class="d-title">Green Widget</span></a></li> 
  </ul>
  <ul class="col-sm-2 list-unstyled"><li><p class="title">Widget:</p></li>
   <li data-desk="bwid"><a><span class="d-title">Black Widget</span></a></li> 
  </ul>
  <ul class="col-sm-2 list-unstyled"><li><p class="title">Widget:</p></li>
   <li data-desk="wwid"><a><span class="d-title">White Widget</span></a></li> 
  </ul>
  

  小部件：
  红色小部件 蓝色小部件 黄色小部件
  • 橙色小部件
  小部件：

绿色小部件

小部件：

黑色小部件 小部件：

白色小部件

---

我正在尝试使用现代JavaScript而不是JQuery来完成这项任务。非常感谢您的帮助。

最好的方法是使用模运算符：

let liTagLimit = 3;
let index = 0;
let html = '<ul id="first-ul">';

for(let key in data){
    //...create li
    index++;
    if(index % liTagLimit == 0){//<----- HERE IS THE TRICK
        html += "</ul><ul>";
    }
html += '</ul>';

it=3；
设指数=0；
让html=''；
for（让我们输入数据）{
//…创造李
索引++；
如果（索引%t==0）{/执行此操作的最佳方法是使用模运算符：

let liTagLimit = 3;
let index = 0;
let html = '<ul id="first-ul">';

for(let key in data){
    //...create li
    index++;
    if(index % liTagLimit == 0){//<----- HERE IS THE TRICK
        html += "</ul><ul>";
    }
html += '</ul>';

it=3；
设指数=0；
让html=''；
for（让我们输入数据）{
//…创造李
索引++；
如果（索引%it==0）{/您可以将forEach与索引一起使用

html += '<ul class="col-sm-2 list-unstyled"><li><p class="title">Widgets:</p></li>';
data.forEach((widget,i)=>{
    if (i != 0 && (i % limit == 0)) {
        html += '</ul><ul class="col-sm-2 list-unstyled"><li><p class="title">Widgets:</p></li>';
    }
    html += '<li data-desk="' + widget.mReference + '"><a><span class="d-title">' + widget['mDescription'] + '</span></a></li>';
}
)
html += '</ul>';

html+='
小部件：
；
data.forEach（（小部件，i）=>{
如果（i！=0&（i%限制==0））{
html+='
小部件：
；
}
html++=''+widget['mDescription']+''；
}
)
html+='
'；
您可以将forEach与索引一起使用

html += '<ul class="col-sm-2 list-unstyled"><li><p class="title">Widgets:</p></li>';
data.forEach((widget,i)=>{
    if (i != 0 && (i % limit == 0)) {
        html += '</ul><ul class="col-sm-2 list-unstyled"><li><p class="title">Widgets:</p></li>';
    }
    html += '<li data-desk="' + widget.mReference + '"><a><span class="d-title">' + widget['mDescription'] + '</span></a></li>';
}
)
html += '</ul>';

html+='
小部件：
；
data.forEach（（小部件，i）=>{
如果（i！=0&（i%限制==0））{
html+='
小部件：
；
}
html++=''+widget['mDescription']+''；
}
)
html+='
'；
将“如果”区块内的计数器重置为0！-谢谢！将“如果”区块内的计数器重置为0！-谢谢！我会尝试一下-看起来比我的尝试干净得多我会尝试一下-看起来比我的尝试干净得多