JSFiddle - React, Tailwind, and code Playground

by j08691

JavaScript

window.cars = {

    "compact": [

        {
        "title": "honda",
        "type": "accord",
        "thumbnail": "accord_t.jpg",
        "image": "accord_large.jpg"},

    {
        "title": "volkswagon",
        "type": "rabbit",
        "thumbnail": "rabbit_t.jpg",
        "image": "volkswagon_large.jpg"}

    ],

    "trucks": [

        {
        "title": "Ford",
        "type": "f-150",
        "thumbnail": "ford_t.jpg",
        "image": "chevy_large.jpg"},

    {
        "title": "GMC",
        "type": "silverado",
        "thumbnail": "gmc_t.jpg",
        "image": "gmc_large.jpg"}

    ]

};
$('body').append('<div class="main_wrapper"></div><ul>');


$.each(cars.trucks, function(k, v) {
    $('ul').append('<li class="trucks"><img src="' + v.thumbnail + '" /><h1>Title:' + v.title + ' </h1><h2>Type: ' + v.type + '</h2></li>');
});
$.each(cars.compact, function(k, v) {
    $('ul').append('<li class="compact"><img src="' + v.thumbnail + '" /><h1>Title:' + v.title + ' </h1><h2>Type: ' + v.type + '</h2></li>');
});