Как хранить данные JSON из двух источников в объектах javascript, когда данные загружаются с разной скоростью?

Question

Я пытаюсь создать Article объекты из ссылок, извлеченных с помощью ajax (используя API jquery reddit) в сочетании с дополнительной информацией о ссылках (извлеченной из API jquery embed.ly).

Article объекты (содержащие данные из API Reddit) хранятся в массиве с именем articles используя метод push, чтобы сохранить порядок ссылок. Я использую то же самое i значение, чтобы перебирать как данные Reddit и диктовать, в котором Article в пределах articles массив для хранения данных embed.ly. Это связано с тем, что у меня возникли проблемы с неправильным хранением данных. Article объект из-за времени, необходимого для получения данных.

Это создает проблему, когда getRedditLinks функция запускается снова для следующего subreddit. i сбрасывает значение extractEmbedlyData Функция только получает данные embed.ly для ссылок из первого субредита. Если вы запустите код ( здесь - скрипка) и посмотрите в консоли, вы поймете, что я имею в виду - для последних 5 нет встроенных данных. Articles,

Таким образом, проблема заключается в том, что emded.ly не будет извлекать данные с той же скоростью, что и Reddit, чтобы гарантировать, что оба набора данных хранятся в правильном Article объект.

Я попытался сохранить массив article для каждого subreddit в главном ассоциативном массиве / объекте с использованием динамических имен с небольшим успехом. Это может быть возможно, но я не знаю, как это сделать.

Если вы знаете, как создавать динамически именованные ассоциативные массивы / объекты в такой ситуации, пожалуйста, объясните мне это. В качестве альтернативы, если вы можете придумать лучшее решение и хотели бы объяснить его или, по крайней мере, указать мне правильное направление для исследования, которое будет высоко оценено.

Вот код: HTML:

<script src="http://cdn.embed.ly/jquery.embedly-3.1.1.min.js"></script>

JavaScript:

//Set embed.ly default key
$.embedly.defaults.key = 'a1206fe3b4214b3483b27db1a0a4f2e4';

//An array of subreddits which will eventually be generated from user input.
var userInput = ["nottheonion", "offbeat"]

//Iterate throught the userInputs, runnning the getRedditLinks function on each one.
for (var i = 0; i < userInput.length; i++) {
    getRedditLinks(userInput[i]);
};

//Declare articles array where the Article objects will be stored
var articles = [];

//Article constructor
function Article(url, title, subreddit) {
    this.url = url;
    this.title = title;
    this.description;
    this.imgsrc;
    this.rank;
    this.subreddit = subreddit;
}

//Get Reddit URLs, titles and votes from a subreddit using JSON and store in new Articles. Push the Articles to the article array. 
function getRedditLinks(subredditInput) {
    $.getJSON(
        "http://www.reddit.com/r/" + subredditInput + ".json?jsonp=?",

    function foo(data) {
        var ddc = data.data.children;
        for (i = 0; i < 5 && i < ddc.length; i++) {
            articles.push(new Article(ddc[i].data.url, ddc[i].data.title, ddc[i].data.subreddit));

            //Run the embedly extract function on all the urls in the array.
            extractEmbedlyData(articles[i].url, i)
        }
        console.log(articles);
    });

    //Extract embedly data and add to Articles.
    function extractEmbedlyData(url, i) {
        $.embedly.extract(url).progress(function (data) {
            articles[i].description = data.description;
            articles[i].imgsrc = data.images[0].url;
            articles[i].rank = i;
        });
    }
}

Answer 1

Мог просто передать фактическое Article Возражать extractEmbedlyData вместо индекса

for (i = 0; i < 5 && i < ddc.length; i++) {
    var article=new Article(ddc[i].data.url, ddc[i].data.title, ddc[i].data.subreddit);
     articles.push(article);
     extractEmbedlyData(article)

}

function extractEmbedlyData(article) {
        $.embedly.extract(article.url).progress(function (data) {
            article.description = data.description;
            article.imgsrc = data.images[0].url;
            article.rank = i;
        });
    }