Loop over data and create html elements with data

Question

I am fetching json data from a php script and attempting to display the data on a webpage. The issue I am having is I want to limit the number of < li > tags in a < ul >, if the limit is met then I want to create a new < ul > element.

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"}]

I have attempted looping but I'm getting odd results, code:

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

Result:

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

I am trying to complete this task using modern JavaScript and no JQuery. Any Help would be greatly appreciated.

Reset the counter to 0 inside the 'if' block

Musma
– Musma

2019-07-04 18:32:07 +00:00
Commented Jul 4, 2019 at 18:32 — Musma
– Musma, Commented Jul 4, 2019 at 18:32
doh! - Thank You!

edwardinchains
– edwardinchains

2019-07-04 18:35:30 +00:00
Commented Jul 4, 2019 at 18:35 — edwardinchains
– edwardinchains, Commented Jul 4, 2019 at 18:35

helle · Accepted Answer · 2019-07-05 05:27:45Z

1

The best way to do this is to use the modulo operater:

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

edited Jul 5, 2019 at 5:27

answered Jul 4, 2019 at 18:53

helle

11.8k9 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

edwardinchains Over a year ago

I'll give this a try - looks far cleaner than my attempt

Nikita Saboo · Accepted Answer · 2019-07-04 19:11:28Z

1

you can use forEach with index.

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

answered Jul 4, 2019 at 19:11

Nikita Saboo

736 bronze badges

Collectives™ on Stack Overflow

Loop over data and create html elements with data

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related