How not to display two same JSON properties in one item by id

Question

I have a JSON file, saved locally, on my local drive (still don't know how to use server). In that JSON file I have an array of objects, something like this:

 [
    {
       "id" : 1,
        "movieStill " : "<img src='imgsMovie/MovieFolder/Transformers/StillPhotoBackground.jpg'/>",

    },
    {
       "id" : 2,
        "movieStill " :" <img src='imgsMovie/MovieFolder/Lord of The rings/StillPhotoBackground2.jpg'/>",

    },
 ]

I have two objects, with different ID's and different imgs, under the same property name. Now, when I click an item with id 1, I want to show the background image.

$(document).ready(function() {
    $.getJSON("js/appjson.json", function(data) {
        for (var i = 0; i < data.length; i++) {
            for (var key in data[i]) {
                if (key === "movieStill") {
                    $('.MovieInfo').append(
                        "<div class='imgStill'>" + data[i].movieStill + "</div>"
                    )
                } else {

                }
            }
        }
    })
});

I want to display the image that corresponds to the clicked item's ID, but the above code is displaying both images. How can I fix this problem?

Answer 1

$(document).ready(function() {

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

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

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

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

        if(jsoncollectie[i].id == data_id){
            $( '.MovieInfo' ).append(
                    "<div class='imgStill'>" + jsoncollectie[i].img  + "</div>"
                )
        }   

    }

});


});

please try this way, I hope this will help you