Javascript getjson函数成功并附加到正文后，将div拆分为3

这是对twitch.tv拖缆列表的尝试，是FreeCodeCamp项目的一部分。document.ready函数将数据附加到divs（bs4卡）后，需要将其按3的顺序堆叠在卡组中。 我正在尝试一个拆分为3的函数，但它似乎不起作用。 如何使用承诺做到这一点？非常感谢您的帮助

let拖缆=[“ESL_SC2”，
“ESL_CSGO”、“freecodecamp”、“GeoffStorbeck”、“TB”、“habathcx”、“notmichaelmcdonald”、“RobotCaleb”、“medrybw”、“thomasballinger”、“joe_at_underflow”、“Noobs2nijas”、“mdwasp”、“beohoff”、“Xenocoma”
];
让getDATA=函数（arr）{
设cb='？client_id=c292fn290f4pac7cpk4j4t137uk3tn&callback='；
让url为空https://api.twitch.tv/kraken/';
arr.forEach（函数（流）{
设newUrl=url+'streams/'+stream+cb；
$.getJSON（newUrl）.success（函数（数据）{
设obj={}；
let streaming=（data.stream==null）？false:true；
如果（流媒体）{
obj.theme=‘卡片成功’；
obj.username=流；
}否则{
obj.theme=‘卡危险’；
obj.username=流；
}
$.getJSON（url+'users/'+stream+cb）.done（函数（数据、文本状态、jqXHR）{
obj.logo=data.logo；
$（“.streamers”）.append（“”+obj.username+“”）；
});
});            
});
};
函数splitByThree（）{
var divs=$（“.streamers>streamer”）；
对于（变量i=0；i

---

您需要将

splitByThree

函数移动到

getDATA

函数内部。一旦仅获取JSON数据，则应调用

splitByThree

函数，否则由于执行的异步性质，

splitByThree

函数将无法正常工作，因为

splitByThree

函数操作的数据无效

let streamers = ["ESL_SC2",
        "ESL_CSGO", "freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain"
    ];

        let streamers = ["ESL_SC2",
        "ESL_CSGO", "freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain"
    ];

    let getDATA = function(arr) {
        let cb = '?client_id=c292fn290f4pac7cpk4j4t137uk3tn&callback=?';
        let url = 'https://api.twitch.tv/kraken/';

        arr.forEach(function(stream) {

            let newUrl = url + 'streams/' + stream + cb;


            $.getJSON(newUrl).success(function(data) {
                let obj = {};
                let streaming = (data.stream === null) ? false : true;
                if (streaming) {
                    obj.theme = 'card-success';
                    obj.username = stream;
                } else {
                    obj.theme = 'card-danger';
                    obj.username = stream;
                }

                $.getJSON(url + 'users/' + stream + cb).done(function(data, textStatus, jqXHR) {
                    obj.logo = data.logo;
                    $(".streamers").append('<div class="streamer card col-4 ' + obj.theme + '"><img class="rounded w-25" src=' + obj.logo + '>' + obj.username + '</div>');
                    splitByThree();
                });
            });            
        });

    };

    function splitByThree() {
        var divs = $(".streamers > .streamer");
        for (var i = 0; i < divs.length; i += 3) {
            divs.slice(i, i + 3).wrapAll("<div class='card-deck'></div>");
        }
    }

    let readyFN  = function () {
        getDATA(streamers);

    };
    $(document).ready(readyFN);

let拖缆=[“ESL_SC2”，
“ESL_CSGO”、“freecodecamp”、“GeoffStorbeck”、“TB”、“habathcx”、“notmichaelmcdonald”、“RobotCaleb”、“medrybw”、“thomasballinger”、“joe_at_underflow”、“Noobs2nijas”、“mdwasp”、“beohoff”、“Xenocoma”
];
让拖缆=[“ESL_SC2”，
“ESL_CSGO”、“freecodecamp”、“GeoffStorbeck”、“TB”、“habathcx”、“notmichaelmcdonald”、“RobotCaleb”、“medrybw”、“thomasballinger”、“joe_at_underflow”、“Noobs2nijas”、“mdwasp”、“beohoff”、“Xenocoma”
];
让getDATA=函数（arr）{
设cb='？client_id=c292fn290f4pac7cpk4j4t137uk3tn&callback='；
让url为空https://api.twitch.tv/kraken/';
arr.forEach（函数（流）{
设newUrl=url+'streams/'+stream+cb；
$.getJSON（newUrl）.success（函数（数据）{
设obj={}；
let streaming=（data.stream==null）？false:true；
如果（流媒体）{
obj.theme=‘卡片成功’；
obj.username=流；
}否则{
obj.theme=‘卡危险’；
obj.username=流；
}
$.getJSON（url+'users/'+stream+cb）.done（函数（数据、文本状态、jqXHR）{
obj.logo=data.logo；
$（“.streamers”）.append（“”+obj.username+“”）；
除以三（）；
});
});            
});
};
函数splitByThree（）{
var divs=$（“.streamers>streamer”）；
对于（变量i=0；i

为了执行：

getDATA(streamers).then(function(){return splitByThree()});

函数getDATA必须返回一个对象数组此数组具有您可以执行splitByThree函数

如果要使用以处理“完成”和“失败”，则可以在发生失败时拒绝以解决延迟元素

这样，您的代码行就变成：

$.when.apply($, getDATA(streamers)).done(function () {
    splitByThree()
});

片段：

let拖缆=[“ESL_SC2”，
“ESL_CSGO”、“freecodecamp”、“GeoffStorbeck”、“TB”、“habathcx”、“notmichaelmcdonald”、“RobotCaleb”、“medrybw”，
“托马斯巴林格”、“乔·阿图·阿图·底流”、“诺布斯2宁加斯”、“mdwasp”、“贝奥霍夫”、“色诺科姆又来了”
];
让getDATA=函数（arr）{
//
//创建并初始化要返回的延迟数组
//
var delferredarr=[]；
arr.forEach（函数（ele，idx）{
延迟到达推送（$.Deferred（））；
});
设cb='？client_id=c292fn290f4pac7cpk4j4t137uk3tn&callback='；
让url为空https://api.twitch.tv/kraken/';
arr.forEach（函数（流，idx）{
设newUrl=url+'streams/'+stream+cb；
$.getJSON（newUrl）.success（函数（数据）{
设obj={}；
let streaming=（data.stream==null）？false:true；
如果（流媒体）{
obj.theme=‘卡片成功’；
obj.username=流；
}否则{
obj.theme=‘卡危险’；
obj.username=流；
}
$.getJSON（url+'users/'+stream+cb）.done（函数（数据、文本状态、jqXHR）{
obj.logo=data.logo；
$（“.streamers”）.append（“”+obj.username+“”）；
//
//解析当前的延迟元素
//
deferredArr[idx].resolve（）；
}).fail（函数（）{
//
//解决（拒绝使用then而不是done）
//