IDに基づいてJSONファイルから特定のデータをロードする方法

Question

IDに基づいてJSONファイルから特定のデータをロードします。私はJSONファイルに基づいてサムネイル画像データのリストを表示しています。次にクリックイベントで大きな画像をロードします。

参照用に私のコードを見ることができます。私はクリックイベントのリストからIDに基づいてJSONファイルで大きな画像を見つける方法を知りたいだけです。

たとえば、「名前」の値に基づいてJSONファイルから「largeimg」の値を取得します。 "<" 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の場合は、次のようにattachイベントハンドラのメソッドで使用する必要があります。 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クラスの作成者を使用すると役に立ちます。ここで

は1です：https://timboudreau.com/blog/json/read

あなたは新しいものを検索する必要があるかもしれませんが、一般的に、それはあなたがあなたのJSONデータおよびアクセス特定のデータセクション