如何根據ID從JSON文件加載特定數據

Question

我想根據ID從JSON文件加載特定數據。我基於JSON文件顯示下面的縮略圖圖像數據列表，然後我想在點擊事件中加載大圖像。

你可以看到我的代碼以供參考。我只想知道如何根據點擊事件列表中的ID從JSON文件中找到大圖像。

例如：我想根據'name'值從JSON文件中獲取「largeimg」的值。在我的HTML中，「<'li id =」Red「>」我想如果用戶點擊這個「<」li'>那麼基於id =「Red」應該匹配JSON文件中的「name = Red」從JSON文件 「largeimg」

JSON數據中獲取價值 「/imgs/redlarge.png」

{ 
"colors": [ 
    { 
    "name": "Red", 
    "thumb": "/imgs/redthumb.png", 
    "largeimg": "/imgs/redlarge.png" 
    }, 
    { 
    "name": "Blue", 
    "thumb": "/imgs/bluethumb.png", 
    "largeimg": "/imgs/bluelarge.png" 
    } 
] 
} 

HTML

<div class="preview"> 
<!-- Show data from JSON file based on ID --> 
</div> 
<div class="list"> 
<ul class="colors"> 
</ul> 
</div> 

JQUERY

$.getJSON('data.json', function (data) { 
$.each(data.colors, function (index, value) { 
    $('.colors').append("<li id='item-"+this.name+"'>"+this.thumb+"</li>"); 
}); 
}); 
$('.list li').click(function(){ 
    console.log($(this).attr('id')); 
}); 

Answer 1

.on（）方法將事件處理程序附加到jQuery對象中元素的當前選定集合 。 [關於方法文檔] [1]

對於動態添加的html，您必須使用附加事件處理程序的方法，如下所示。爲json數據定義一個全局顏色變量來搜索數據。

var colors; 

$.getJSON('data.json', function (data) { 

    colors = data.colors; 

    $.each(data.colors, function (index, value) { 
     $('.colors').append("<li id='item-"+this.name+"'>"+this.thumb+"</li>"); 
    }); 
}); 

$('.list li').click(function(){ 

    var name = $(this).attr('id'); 

    var found; 
    $.each(colors, function(index, item){ 
     if(item.name == name){ 
      found = item; 
     } 
    }) 
}); 

if(found){ 
    console.log(found.largeimg); 
} 

Answer 2

它看起來不像文件大小是在JSON數據文件中提供給您的信息。出於這個原因，我不確定你打算如何按尺寸進行分類。除非你滿足於使用「largeimg」作爲文件大小。在這種情況下，使用JSON到Java類的創建者可以幫助你做到這一點。

這裏是一個：https://timboudreau.com/blog/json/read

您可能需要尋找一個新的，但通常它可以讓你解釋你的JSON數據和訪問特定的數據段