I have created a dynamic listview using jQuery Mobile that currently shows 4 list items. The list is generated through JavaScript.
$( document ).ready(function() {
var data = [{
"name": "Light Control",
"category": "category",
"info": "Click for light control",
"img": "light_control"
}, {
"name": "Power Outlet",
"category": "category",
"info": "Click for power outlets",
"img": "power_outlets"
}, {
"name": "Single Switch",
"info": "One button, one lamp",
"img": "blind_control"
}, {
"name": "Double Switch",
"info": "Two buttons, two lamps",
"img": "multimedia"
}];
var output = '';
$.each(data, function (index, value) {
if(value.category === 'category') {
output += '<li><a href="#">'
output += '<img src="img/' + value.img + '.jpg">'
output += '<h2>' + value.name +'</h2>'
output += '<p>' + value.info + '</p>'
output += '</a></li>';
}
});
$('#list_zoek_category').html(output).listview("refresh");
});
Currently, the list displays each row from the data as a list item. However, I want to only display the list items where category equals "category".
Does anyone have any suggestions on how I can achieve this?