JSFiddle - React, Tailwind, and code Playground

by meetravi

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
table{
    width:100%;
    font-size: 1.8em;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border: none;
}
tr:nth-child(odd){
    background-color: #EEEEEE ;
}
tr:nth-child(even){
    background-color: #DDDDDD ;
}
td{
    padding:20px;
    width: 33.33%;
    text-transform: capitalize;
}
td.price{
    font-weight: bold;
}

JavaScript

$(document).ready(function() {

var productData = '[{"id":1,"name":"Retro","price":10,"color":"blue"},{"id":2,"name":"Designer","price":12,"color":"red"},{"id":3,"name":"Classic","price":14,"color":"yellow"},{"id":1,"name":"Retro","price":10,"color":"blue"},{"id":4,"name":"Rimless","price":14,"color":"purple"},{"id":5,"name":"Glam & Sparkle","price":8,"color":"grey"}]',
productDataArray = $.parseJSON(productData),
primaryKey = new Array(), 
uniqueProductDataArray = new Array();

    for(i in productDataArray){
        if(primaryKey.indexOf(productDataArray[i].id)=== -1){
            primaryKey.push(productDataArray[i].id);
            uniqueProductDataArray.push(productDataArray[i]);
        }
    }
    console.log(productDataArray);
    console.log(uniqueProductDataArray);
    $('body').html("<table cellspacing=\"0\" cellpadding=\"0\"><tbody></tbody></table>");

    for(i in uniqueProductDataArray){
    $('table tbody').append('<tr><td class="price">'+"£"+uniqueProductDataArray[i].price+'</td><td class="name">'+uniqueProductDataArray[i].name+'</td><td class="color">'+uniqueProductDataArray[i].color+'</td></tr>')

    }


});