Question

我查了很多例子，没有人真正回答我的问题。我试图遍历JSON文件并将某些项添加到我页面上的div。

这是我到目前为止编写的代码。此代码将所有对象的所有项值返回到不同的div中，而不是将每个项目附加到其div。您可以忽略第一个for循环，它只是为每个div添加id。我还创建了example fiddle。

$.ajax({
    type: 'GET',
    url: 'https://api.twitch.tv/kraken/streams',
    dataType: 'json', 
    success: function(data) {
        console.log(data);

        var name = document.getElementsByClassName("player-name");
        var gamename = document.getElementsByClassName("gamename");
        var viewcount = document.getElementsByClassName("viewcount");
        var date = document.getElementsByClassName("date");
        var numItems = $('.stream').length;
        var i = 1;

        $('.stream').each(function(i) {
            $(this).attr('id', (i + 1));
            i++;
        });

        $('.stream').each(function(i, obj) {
            $.each(data.streams,function(index,item) {
                $(name).append(item.channel.name);
                $(gamename).append(item.channel.game);
                $(viewcount).append(item.viewers);
                $(date).append(item.created_at);
            });
        });
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("some error");
    }
});

Answer 1

var name = $(".player-name"); // jQuery's $ cares about your fingers 
var gamename = $(".gamename");
var viewcount = $(".viewcount");
var date = $(".date");

$.ajax({
    type: 'GET',
    url: 'https://api.twitch.tv/kraken/streams',
    dataType: 'json', 
    success: function(data) {

        console.log(data);

        $.each(data.streams,function(index,item) {
            // now use .eq(index) over your elements collections
            name.eq(index).append(item.channel.name);
            gamename.eq(index).append(item.channel.game);
            viewcount.eq(index).append(item.viewers);
            date.eq(index).append(item.created_at);
        });

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("some error");
    }
});

将JSON对象项添加到具有相同类的DIV

1 个答案: