JSON文字列をループして動的JS出力を作成

Question

基本的に、私はAPIから情報を取得してJSで出力しています。現在、PHPで作業しています。 PHPでJSを出力するのではなく、JSファイルにキャッシュ可能にしたいと思います。 WordPressを使用して、API情報を取得し、jsonでコード化し、JSで使用するためにローカライズしました。ここで

は、JSON文字列情報と私の新しいJSのVARです：

var discographyJson = php_params.discography_setup.replace(/"/g, '"'); 

このJSON出力は次のようなものになります。

{ 
    "discography": [ 
     { 
      "album_id":1, 
      "tracks":[ 
       {"title":"Track 1 of Album 1"}, 
       {"title":"Track 2 of Album 1"}, 
       {"title":"Track 3 of Album 1"} 
      ] 
     }, 
     { 
      "album_id":2, 
      "tracks":[ 
       {"title":"Track 1 of Album 2"}, 
       {"title":"Track 2 of Album 2"}, 
       {"title":"Track 3 of Album 2"} 
      ] 
     } 
    ] 
} 

私がやりたい何をして、そのコンテンツをループでありますJS/jQueryを使用して、可能であれば次の出力を作成します。

$('#album_1').click(function() { 
    myPlaylist.setPlaylist([ 
     { title: "Track 1 of Album 1" }, 
     { title: "Track 2 of Album 1" }, 
     { title: "Track 3 of Album 1" } 
    ]); 
}); 

$('#album_2').click(function() { 
    myPlaylist.setPlaylist([ 
     { title: "Track 1 of Album 2" }, 
     { title: "Track 2 of Album 2" }, 
     { title: "Track 3 of Album 2" } 
    ]); 
}); 

はJS/jQueryの第一人者であること、私は私の脳をしぼっANここまでのものを得ることに多くの時間を費やしてきたわけではありません。 JSONデータをループしてjQuery関数を設定する方法を理解できません。しかし、私は数時間試行錯誤のデバッグから学んだ。

Answer 1

はすでに現実のJSON-オブジェクトにJSON文字列を解析されていることを、と仮定すると、私はこれが移動するための方法であるべきだと思います。

$.each(discographyJson.discography, function(index, el) { 
    $("#album_" + el.album_id).click(function() { 
     var album = el; 
     myPlaylist.setPlaylist(album.tracks); 
    }); 
}); 

アルバム変数は必須であることに注意してください。 elをalbumに割り当てていない場合は、常にディスコグラフィーの最後の要素のみを使用します。

Answer 2

$('#album_1').click(function() { 
//i assume the json is parsed  
    myPlaylist.setPlaylist([ 
     { title: json.discography[0].tracks[0].title }, 
     { title: json.discography[0].tracks[1].title } , 
     { title: json.discography[0].tracks[2].title }     
    ]); 

$('#album_2').click(function() { 
myPlaylist.setPlaylist([ 
    { title: json.discography[1].tracks[0].title }, 
    { title: json.discography[1].tracks[0].title }, 
    { title: json.discography[1].tracks[0].title } 
]); 


}); 

Answer 3

これは動作するはずです：

for(var i = 0;i<json.discography.length;i++){ 
    (function(i){ 
     $('div').append(
      $('<a/>',{html:json.discography[i].album_id}).click(
       function(){ 
        console.log(json.discography[i].tracks); 
       } 
      ) 
     ) 
    })(i); 
} 

http://jsfiddle.net/Dqafg/

Answer 4

なぜこの手順を実行していますか？

var discographyJson = php_params.discography_setup.replace(/"/g, '"'); 

これを行う理由はなく、JSON.parseを実行する必要があります。これは時間の無駄です。

は、PHPは、JSONファイルは、コンテンツタイプは、今すぐにJSON

$.get('yourBackend.php', processResults); 

をフェッチするためのjQueryのgetを使用

header('Content-type: application/json'); 
ADD CACHING HEADERS 
WRITE OUT JSON HERE 

を設定されていることを確認するファイルに正しくJSONオブジェクトを書かせます

function setAlbumElem(id, tracks){ 
    $("#album_" + id).click( 
     function(){ 
      myPlaylist.setPlaylist(tracks); 
     } 
    ); 

} 

function processResults(data) { 
    var discs = data.discography; //could use jQuery each here 
    for(var i=0;i<discs.length; i++){ 
     setAlbumElem(curDisc.album_id, curDisc.tracks); 
    } 
}