javascript - 使用 jquery 和 json 显示数组中的所有项目

Question

我正在尝试使用冰与火之歌 API 中的 json 和 jquery 获取数组中的所有项目以显示。我只能从每个数组中显示一项。

这是代码笔:https://codepen.io/frederickalcantara/pen/aWeXOz

var data;

$.getJSON(characters[i], function(json) {
    data = json;

    var alliance = $('#alliance');
    for (var i = 0; i < data.allegiances.length; i++) {
        if (i === data.allegiances.length - 1) {
            $.getJSON(data.allegiances[i], function(json1) {
               alliance.html(json1.name);
            });
        } else {
            $.getJSON(data.allegiances[i], function(json1) {
               alliance.html(json1.name + ', ');
            });
        }

    }

    const title = $('#title');

    if (data.titles.length === "") {
        return 'N/A';
    } else {
        for (i = 0; i < data.titles.length; i++) {

            if (i === data.titles.length - 1) {
                title.html(data.titles[i]);
            } else {
                title.html(data.titles[i]) + ', ';
            }

        }


    const tv = $('#seasons');

    for (var i = 0; i < data.tvSeries.length; i++) {
        if (i === data.tvSeries.length - 1) {
            tv.html(data.tvSeries[i]);
        } else {
            tv.html(data.tvSeries[i] + ', ');
        }
    }

    const actor = $('#actors')
    if (json.playedBy === "") {
        return 'N/A';
    } else {
        actor.html(json.playedBy);
    }

});

Answer 1

主要问题是你的循环。您不断替换 html 元素中的值，直到数组中的最后一个值。您可以像这样简化此代码:

  title.html(data.titles.join(','));

它取代了所有这些:

 for (i = 0; i < data.titles.length; i++) {

        if (i === data.titles.length - 1) {
            title.html(data.titles[i]);
        } else {
            title.html(data.titles[i]) + ', ';
        }

    }

更新:处理效忠问题。 此处使用 Promise 很重要，因为您正在进行大量 AJAX 调用，并且需要确保它们在尝试显示它们之前已得到解决。您可以将整个 for 循环替换为忠诚度，如下所示:

  Promise.all(data.allegiances.map(function(ally){
     return new Promise(function(resolve, reject){
         $.getJSON(ally, function(json) {
               resolve(json.name);
         });
     });
   }))
   .then(function(allies){
     alliance.html(allies.join(', '));
   });