CODEWITHSUNDEEP
jqueryjsoneachgetjson
user1661677
user1661677

Reputation: 1272

.getJSON in .each function

I'm looking to nest a .getJSON function in a .each function in order to tie data together from two different requests.

I'm using the Wistia video api, and looking to load videos and their basic info, and also show the play_count in the "stats" JSON.

Here's what I've tried, but it's not working-- any suggestions?

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

Upvotes: 1

Views: 571

Answers (1)

Deepak Jose
Deepak Jose

Reputation: 76

Some of the variables you are using in the last line will be available only once the second getJSON has fulfilled its promise. so put the append line inside the second getJSON function so that it will be executed only after that promise too is resolved.

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


        });


    })
});

Upvotes: 3

Related Questions