如何不通过id在一个项目中显示两个相同的JSON属性

时间:2016-09-24 13:20:37

标签: javascript jquery json

我在本地驱动器上有一个本地保存的JSON文件(仍然不知道如何使用服务器)。在那个JSON文件中,我有一个对象数组,如下所示:

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

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

    },
 ]

我有两个对象,具有不同的ID和不同的img,在相同的属性名称下。现在,当我点击ID为1的项目时,我想显示背景图像。

$(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 {

                }
            }
        }
    })
});

我想显示与点击的项目ID相对应的图像,但上面的代码显示两个图像。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

$(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>"
                )
        }   

    }

});


});

请尝试这种方式,我希望这会对你有所帮助