les dejo el JSON
Código Javascript:
Ver original
{ "data": [ { "id": "e4462416-ee7b-4101-ac03-ae1025ee9e32", "title": "Devil At The Catacombs", "teaser": "Et porro recusandae labore cum labore esse aperiam. Aut id dolorum praesentium quidem eveniet optio quas cupiditate dolorem. Cupiditate vel animi nulla aspernatur nemo.", "categories": [ "horror" ], "lang": [ 2, 3 ], "image": "image", "date_pub": "2/19/2017", "mode": [ 2 ] }, { "id": "b42fbd10-8b35-49b9-8b88-81e58e411576", "title": "Angels Without A Mouth", "teaser": "Autem et ab commodi dolor magni quo aspernatur cum aspernatur. Sed ullam blanditiis qui. Sequi saepe ut blanditiis architecto hic deserunt ullam et. Repellat quia earum ea eveniet facilis aperiam temporibus deleniti. Aliquam id voluptatem reprehenderit laudantium deleniti inventore rerum non culpa. Aut sint maxime illum quia.", "categories": [ "horror" ], "lang": [ 1, 2 ], "image": "image", "date_pub": "2/14/2017", "mode": [ 3 ] }, { "id": "45ee0732-8968-4002-be7d-7fc99dbd718c", "title": "Companion Program", "teaser": "Blanditiis unde provident. Est consequuntur id quibusdam atque culpa magnam. Consequatur ut autem nisi velit consequatur qui dolor voluptates. Nesciunt totam suscipit sed ad minus officiis ipsa quo fuga. Ratione voluptatem asperiores quia qui voluptas et quae.", "categories": [ "comedy" ], "lang": [ 2, 1 ], "image": "image", "date_pub": "8/21/2016", "mode": [ 2 ] }, { "id": "6bc70195-ae44-47b3-9596-836a970cefe0", "title": "Jester Can Dance", "teaser": "Quis voluptates autem quidem. Eum itaque rerum veritatis perferendis earum rerum molestias soluta eum. Quia dolor autem ut corporis amet. Doloremque reiciendis quas. Eos voluptatibus voluptatem. Quos nisi ad voluptates enim voluptas nobis adipisci eaque sequi.", "categories": [ "comedy" ], "lang": [ 2, 3 ], "image": "image", "date_pub": "2/19/2017", "mode": [ 1 ] } ] }
y el código del evento onclick
Código Javascript:
Ver original
$.getJSON("/archivo.json", function(data) { $('#categoria li#1').on('click', function(){ var projectHTML = '<ul id="resultado">'; $.each(data.data.categories, function(i, item) { if (categories == 'horror') { projectHTML += '<li>'; projectHTML += '<span class="image"><img src=' + item.image + '/></span>'; projectHTML += '<span class="title">'+'<h3>' + item.title+ '</h3>'+'</span>'; projectHTML += '<span class="description">'+'<p>' + item.teaser + '</p>'+'</span>'; projectHTML += '</li>'; } }); //end each projectHTML +='</ul>'; $('content').html(projectHTML); }) })