JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="menulist"></ul>
<div class="content"></div>
JavaScript
var jsonData;
$(document).ready(function () {
function getData() {
var data = tempData;
for (i = 0; i < data.length; i++) {
var menulistdata = data[i].category,
menulist = '<li class="" data-att="' + menulistdata + '">' + menulistdata + '</li>'
$(".menulist").append(menulist);
}
$('.menulist li').on('click', function () {
var list = $(this).text();
for (i = 0; i < data.length; i++) {
var productData = data[i].products;
if (data[i].category == list) {
$(".content").text("")
for(key in productData){
for(newkey in productData[key][0]){
}
$(".content").append(productData[key][0].image +'<br>'+ productData[key][0].type + '<br>'+productData[key][0].size + '<br>'+productData[key][0].date)
$(".content").append('<br>');
}
}
}
})
}
var tempData = [
{
"category":"car",
"products": {
"BMG" : [{
"image" : "images/cars/BMW.jpg",
"date": "5-May-2015",
"type": "JPGE image",
"size": "1132 KB"
}],
"verna":[{
"image" : "images/cars/Verna.jpg",
"date": "5-May-2015",
"type": "JPGE image",
"size": "1132 KB"
}]
}
},
{
"category":"Nature",
"products": {
"Nature Mood At Night" : [{
"image" : "images/nature/Night.jpg",
"date": "5-May-2015",
"type": "JPGE image",
"size": "1132 KB"
}],
"Snowfall on Hut":[{
"image" : "images/nature/Hut.jpg",
"date": "5-May-2015",
"type": "JPGE...