通过jquery在html中显示json中的特定对象

Display a specific object from json in html through jquery

本文关键字：对象 json 显示 jquery html 通过      更新时间：2023-09-26

我有一个无序的列表，其中每个列表项通过html给定一个数据id，并且我在json中有一个数组，其中有许多列表项。每个列表项对应于json中的一个特定对象。

我想在html中显示相应的对象，当我点击一个列表项。

这是我到目前为止所做的:小提琴(免责声明:第一次使用jquery &Json，我用我在20+ open tabs中找到的信息制作了这个脚本)

因此，在结果中，当我点击列表项时，大图，标题，描述性文本和较小的图像都应该更改为正确的。

下面是来自小提琴的代码:

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"}
]
}

我的主要问题是，我可以加载json，但似乎无法访问数组。提前感谢，并随时提出其他问题!

根据完整的解决方案，您可以使用列表行的索引来查找数据中的行:

$( "#collectie li" ).click(function(){
  var thumb_index = $(this).index();
  var dataObject = jsoncollectie[thumb_index];
  $(this).find('img').attr(src, dataObject.image);
});

不要使用Object。数组的键。使用数组。forEach or for (var x = 0;x & lt;array.length;x + +)

首先，您没有正确访问数据属性。

第二，你没有通过索引访问数组。此外，不需要遍历id。相反，您可以从data-id attr中删除字符串的"item"部分，然后剩下一个像字符串一样的整数。这就是parseInt()将其转换为整数的地方，从而允许我们查找数组中数据的索引。javascript中所有的数组和索引都是从0开始的，所以对于data-id属性中的slice()项，我们使用slice(3)

编辑:

要遍历数组，然后查看数据id是否等于数组中的标题，使用以下命令:

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

});

for循环基本上是在计算并根据data_id尝试每个标题，直到找到匹配或到达数组的末尾。

一个IRL的朋友帮我完成了代码，这是我现在使用的javascript/jquery，它工作得很好。

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

});
相关文章：