.each 函数中的 .getJSON

Question

我希望在 .each 函数中嵌套 .getJSON 函数，以便将来自两个不同请求的数据联系在一起。

我正在使用 Wistia 视频 api，希望加载视频及其基本信息，并在 "stats" JSON 中显示 play_count。

这是我尝试过的方法，但它不起作用——有什么建议吗？

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

Answer 1

您在最后一行中使用的某些变量只有在第二行 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>');


        });


    })
});

.each 函数中的 .getJSON

.getJSON in .each function

each

jquery

json

getjson