Display a specific object from json in html through jquery

Question

I have an unordened list where each list item is given a data id through html, and i have an array in json with as many objects as there are list items. Each list item corresponds to a specific object in json.

I want to display the corresponding object in html when i click on a list item.

This is what i have so far: Fiddle (disclaimer: first time using jquery & json, i made this script with information i found in 20+ open tabs)

So, in the result, when i click on a list item the big picture, title, descriptive text and smaller image should all change to the correct ones.

Here is the code from the fiddle:

HTML:

<section id="collectie" class="twopane">
    <ul>
        <li data-id="item1"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item2"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item3"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item4"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item5"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item6"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item7"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item8"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item9"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item10"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item11"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item12"><img src="http://lorempixel.com/125/125/"></li>
    </ul>
</section>

<section id="detail" class="twopane">

    <img class="detailimage" src="http://lorempixel.com/400/400/">
    <div>
        <h4>Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <img class="secondaryimage" src="http://lorempixel.com/125/125/">

</section>

Javascript:

$(document).ready(function() {

var jsoncollectie = $.getJSON( "js/collectie.json", function() {
})

jsoncollectie = jsoncollectie.responseJSON["stoelen"];

$( "#collectie li" ).click(function(){
    console.log("click detected");
    var thumb_id = $(this).data("id");
    console.log(thumb_id);

    for(i=0;i<Object.keys(jsoncollectie).length;i++){
        var jsonid = jsoncollectie.title;
        console.log("jsonid:" + jsonid);
        if(jsonid===thumb_id){
            $(this).find('img').attr('src', jsoncollectie.image);
        }
    }


});

});

JSON:

{
"stoelen":
[
    {"title": "item1", "image": "images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "images/grid/7.png"},
    {"title": "item2", "image": "images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "images/grid/6.png"},
    {"title": "item3", "image": "images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "images/grid/7.png"},
    {"title": "item4", "image": "images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "images/grid/6.png"}
]
}

The main problem i have is that i can load the json but can't seem to access the array. Thanks in advance and feel free to ask additional questions!

Answer 1

depending on the full solution you could just use the index of the list row to look up the row in your data:

$( "#collectie li" ).click(function(){

  var thumb_index = $(this).index();
  var dataObject = jsoncollectie[thumb_index];
  $(this).find('img').attr(src, dataObject.image);

});

Do not use Object.keys for array. Use array.forEach or for (var x = 0; x < array.length; x++)

Answer 2

First, you aren't accessing the data-attr correctly.

Second, you aren't accessing your array by index. additionally, it is not necessary to iterate over the id. instead, you can remove the "item" part of your string from your data-id attr then you are left with an integer like string. this is where parseInt() comes in to convert it to an integer, thus allowing us to look up the index of your data in the array. all arrays and indexes in javascript start at 0, so to slice() item from the data-id attribute, we use slice(3)

EDIT: To iterate over the array then see if the data id is equal to the title in the array use this:

$( "#collectie li" ).click(function(){
console.log("click detected");
var data_id = $(this).attr("data-id");
for(var i = 0; i < jsoncollectie.length; i++){
    if(jsoncollectie[i].title == data_id){
        $(this).children('img').attr('src', jsoncollectie[i].image);
        return;
    }
}

});

basically the for loop is counting up and trying each title against the data_id until it finds a match or reaches the end of the array. if it finds a match the function terminates.

Answer 3

An IRL friend helped me finish the code, this is the javascript/jquery i'm using now and it works perfectly.

$(document).ready(function() {

$.getJSON( "js/collectie.json", function(data) {
    jsoncollectie = data;
})

$( "#collectie li" ).click(function(){

    console.log("click detected");
    var thumb_id = $(this).data("id");
    console.log(thumb_id);
    console.log(jsoncollectie);

    for(var i = 0; i < jsoncollectie.stoelen.length; i++){

        if(jsoncollectie.stoelen[i].title == thumb_id){
            $("#detailimage").attr('src', jsoncollectie.stoelen[i].image);
            console.log(jsoncollectie.stoelen[i]);
        }   

    }

});


});