Javascript 循环JSON字符串并创建动态JS输出

基本上，我从和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函数。然而，我从几个小时的试错调试中学到了很多东西。

这应该是可行的：

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


});

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);
}

---

假设您已经将JSON字符串解析为真正的JSON对象，我认为应该这样做：

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

---

请注意，album变量是必需的。如果您没有在此处将el分配给唱片集，您将始终只使用唱片集的最后一个元素。

为什么要执行此步骤

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);
    }
}

---

为什么要把这些东西包装成一个内部函数呢？我把它包装成一个闭包，这样我就可以在ClickIsee上得到正确的值。但你不觉得变量会更冗长吗？无论如何，这里没有严肃的批评。最初，我只是想让wp_localize_scrpt工作，如下所示：。我试试你的方法。我感谢你的帮助！谢谢，但我认为这行不通。我从API中获取信息，在这种情况下，我不知道专辑ID、有多少张专辑，或者曲目是什么。它需要更具活力。谢谢你！