时间戳

首页 > 解决方案 > 循环数据并使用数据创建 html 元素

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

问题描述

我正在从 php 脚本中获取 json 数据并尝试在网页上显示数据。我遇到的问题是我想限制 <ul> 中 <li> 标记的数量，如果满足限制，那么我想创建一个新的 <ul> 元素。

JSON：

[{"mDescription":"Red Widget","mReference":"rwid"},{"mDescription":"Blue Widget","mReference":"bwid"},{"mDescription":"Yellow Widget","mReference":"ywid"},{"mDescription":"Orange Widget","mReference":"owid"},{"mDescription":"Green Widget","mReference":"gwid"},{"mDescription":"Black Widget","mReference":"bwid"},{"mDescription":"White Widget","mReference":"wwid"}]

我尝试循环，但得到奇怪的结果，代码：

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);
    })
}

结果：

<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 来完成这项任务。任何帮助将不胜感激。

标签： javascriptloops

解决方案

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

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>';

推荐阅读