Question

基本上，我从JS获取信息并在JS中输出它。目前，我在PHP中工作。我不想用PHP输出JS，而是希望它可以在JS文件中缓存。使用WordPress，我已经获取了API信息，json对其进行了编码，并对其进行了本地化以便在JS中使用。

这是我的新JS var，带有JSON字符串信息：

var discographyJson = php_params.discography_setup.replace( /&quot;/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

$( '#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 2

这应该有效：

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 3

假设您已经将JSON字符串解析为真正的JSON-Object，我认为这应该是要走的路：

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

请注意，专辑变量是必不可少的。如果您未在此处el分配album，则始终只使用唱片的最后一个元素。

Answer 4

你为什么要这么做？

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

没有理由这样做，它需要你运行JSON.parse，这只是浪费时间。

让php将JSON对象正确写入文件，确保JSON文件的内容类型设置为

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

现在使用jQuery来获取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);
    }
}

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

4 个答案: