.each函数中的.getJSON

时间:2015-12-08 09:47:13

标签: jquery json each getjson

我希望在.each函数中嵌套.getJSON函数,以便将数据从两个不同的请求中绑定在一起。

我正在使用Wistia视频API,并希望加载视频及其基本信息,并在"统计信息中显示play_count" JSON。

这是我尝试过的,但它不起作用 - 有什么建议吗?

var projectHashId = "3xom8bku3l";
var wistiaKey = "*hidden*";
var projectStats = "https://api.wistia.com/v1/stats/projects/" + projectHashId +".json?api_password=" + wistiaKey;
var projectMedias = "https://api.wistia.com/v1/projects/" + projectHashId + ".json?api_password=" + wistiaKey;

var total = 0

$.getJSON(projectMedias, function (data) {
    $.each(data.medias, function (i, v) {
        var name = v.name;
        var duration = v.duration;
        var hashedId = v.hashed_id;
        var thumb_orig = v.thumbnail.url;
        var thumb_size = "640x360";
        var thumb = thumb_orig.replace('100x60',thumb_size);
        var description = v.description + " / Created " + v.created;
        var wistiaKey = "*hidden*";
        var mediaStats = "https://api.wistia.com/v1/stats/medias/" + hashedId + ".json?api_password=" + wistiaKey;

        $.getJSON(mediaStats, function (data) {
            var loads = data.load_count;
            var plays = data.play_count;
            var engagement = data.engagement;
        });

        $('#insert-json-videos').append('<div class="col-lg-12 spacer"><div class="video"><img id="video-thumb" src="' + thumb + '"><div class="video-menu"><div class="video-desc"><div class="video-main">' + name + '</div><div class="video-sub"><span id="video-desc">' + description + '</span></div></div><div class="video-stats"><div class="video-main"><a href="stats"><span id="video-views">' + plays + '</span></a></div><div class="video-sub">total views</div></div></div></div></div>');
    })
});

1 个答案:

答案 0 :(得分:3)

您在最后一行中使用的某些变量只有在第二个getJSON履行承诺后才可用。所以将append行放在第二个getJSON函数中,这样只有在该承诺得到解决后才能执行。

var total = 0

$.getJSON(projectMedias, function (data) {
    $.each(data.medias, function (i, v) {
        var name = v.name;
        var duration = v.duration;
        var hashedId = v.hashed_id;
        var thumb_orig = v.thumbnail.url;
        var thumb_size = "640x360";
        var thumb = thumb_orig.replace('100x60',thumb_size);
        var description = v.description + " / Created " + v.created;
        var wistiaKey = "*hidden*";
        var mediaStats = "https://api.wistia.com/v1/stats/medias/" + hashedId + ".json?api_password=" + wistiaKey;

        $.getJSON(mediaStats, function (data) {
            var loads = data.load_count;
            var plays = data.play_count;
            var engagement = data.engagement;

            $('#insert-json-videos').append('<div class="col-lg-12 spacer"><div class="video"><img id="video-thumb" src="' + thumb + '"><div class="video-menu"><div class="video-desc"><div class="video-main">' + name + '</div><div class="video-sub"><span id="video-desc">' + description + '</span></div></div><div class="video-stats"><div class="video-main"><a href="stats"><span id="video-views">' + plays + '</span></a></div><div class="video-sub">total views</div></div></div></div></div>');


        });


    })
});