JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div class="results"></div>

JavaScript

var results = [{
    "name": "name1",
    "type": [{ "id": '2'}, 
             { "id": '1'},
             { "id": '4'}, 
             { "id": '6'}],
    "images": [{ "url": "url0" },
               { "url": "url1" }, 
               { "url": "url2" }, 
               { "url": "url3" },
               { "url": "url4" }],
    }, {
    "name": "name2",
    "type": [{ "id": '25' }, 
             { "id": '123' },
             { "id": '423' }, 
             { "id": '346' }],
     "images": [{ "url": "url0" }, 
                { "url": "url1" }, 
                { "url": "url2" }, 
                { "url": "url3" }, 
                { "url": "url4" }],
    }, {
    "name": "name3",
    "type": null,
    "images": null
    }];


// Use a document fragment to avoid DOM updates in the loop
var $fragment = $(document.createDocumentFragment());
for (var i = 0; i < results.length; i++) {
    // If there is an image, add it
    if(results[i].images) {
        $fragment.append($('<img src="' + results[i].images[1].url + '"/>'));
    }
    
    $fragment.append($('<p class="liste">' + results[i].name + '</p>'));
    
    // Keep track of the current UL so it can be appended to directly
    var $curULTag = $('<ul></ul>').appendTo($fragment);
    
    if(results[i].images && results[i].type) {
        for (var j = 0; j < results[i].type.length; j++) {
            // add the li to the current UL 
            $curULTag.append('<li>' + results[i].type[j].id + '</li>');
        }
    }
}

// Append the full results 
$('.results').append($fragment);