Question

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

标签的数量，如果满足限制，那么我想创建一个新的

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

Answer 1

执行此操作的最佳方法是使用模运算符：

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

Answer 2

您可以将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元素

2 个答案: