Javascript 使用jquery和json显示数组中的所有项

我试图使用来自《冰之歌》和《火之歌》api中的json和jquery来获取数组中的所有项。我只能从每个数组中获得一个要显示的项

这是代码笔：

var数据；
$.getJSON（字符[i]，函数（json）{
data=json；
var联盟=$（“#联盟”）；
对于（变量i=0；i

主要问题是循环。在数组中的最后一个值出现之前，您一直在替换html元素中的值。您可以将此代码简化为：

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

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

它取代了所有这些：

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

    }

---

看起来

.html

应该是

.append

但是对于哪个数组？也不是。append要求您向它附加一个html元素？我没有试图创建任何html元素，我已经在html页面lol上创建了我的html。在包含

.html

的每个
For
循环中，append

只会创建一个H如果您将HTML传递给TML元素，则会添加纯文本，而不会创建HTML元素。（作为补充说明，如果您不想添加HTML，则可能应该使用

.text

，但实际上这不是您需要的）。我使用条件数组，因为数组中的最后一个点将包含逗号，这是我不想要的。而

join（）

会解决这个问题。好的，那么allegiance数组呢？因为它使用json来获取名称，所以我需要做些什么，或者我仍然可以使用join（）吗通常情况下，你可能想考虑这个函数。当你在这个循环中做Ajax调用时，你可能需要考虑承诺，以确保它们在移动之前完成。

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