JSFiddle - React, Tailwind, and code Playground

by Hayriye Aydin

HTML

<div id="renderList"></div>

CSS

ul#proList{list-style-position: inside}
li.item{list-style:none; padding:5px;}

JavaScript

(function(){
    var ul = document.createElement('ul');
    ul.setAttribute('id','proList');

    productList = [{"id":0,"firstName":"Juerg","lastName":"Paulison","details":{"age":5}},{"id":1,"firstName":"Peter","lastName":"Mueller","details":{"age":5}},{"id":3,"firstName":"Hans","lastName":"Mettmann","details":{"age":3}}];
    
    document.getElementById('renderList').appendChild(ul);
    productList.forEach(renderProductList);

    function renderProductList(element, index, arr) {
        var li = document.createElement('li');
        li.setAttribute('class','item');
        
        ul.appendChild(li);
        

        
        li.innerHTML=li.innerHTML + element;
    }
})();