通過JSON字符串循環並創建動態JS輸出

Question

基本上，我從API獲取信息並在JS中輸出它。目前，我使用PHP工作。我不想用PHP輸出JS，而是想讓它在JS文件中可緩存。使用WordPress，我已經獲取了API信息，json編碼了它，並將其本地化以供JS使用。

這是我的新的JS變種與JSON字符串信息：

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大師，我絞盡腦汁花了好幾個小時把事情做了這麼多。我無法弄清楚如何循環瀏覽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文件具有內容類型設置

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

現在使用jQuery的get來獲取JSON我們

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

循環瀏覽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); 
    } 
}