访问Ajax调用中加载的数组元素

Question

我通过Ajax调用从数据库中获取了一组逗号分隔的字符串，

b-819-0,b-819-1,b-819-2

我尝试使用将其加载到数组中

let imgNames = []; 
imgNames.push(obj[i]['indicators'].split(','));

现在将数组记录为：

但是当我尝试像这样循环访问元素时

 for (let i = 0; i <2; i++) { 
  inx += '<li class="list-inline-item"> <div class="product" data-fname="'+imgNames[i]+'"></div></li>';
  }  

仅在第一个fname中转储数组的所有元素！并将undefined添加到其他。再次如您所见，imgNames数组中已经有3个元素！

为什么会这样，我该如何解决？

Answer 1

imgNames是一个只有一个元素（逗号分隔的数组）的数组。

发生这种情况是因为您将obj[i]['indicators'].split(',')推入了空的imgNames数组。

您的代码应为：

let tuples = obj[i]['indicators'].split(',')
tuples.forEach(imgNames.push)

假设imgNames不为空

如果没有，那么只需let imgNames = obj[i]['indicators'].split(',')

Answer 2

您要在第一个元素中推送数组

使用concat代替push

imgNames.concat(obj[i]['indicators'].split(','));

Answer 3

您可以使用Spread Syntax将每个项目添加到数组中，这样就无需数组数组，而是字符串数组。

let imagNames = ['img-1', 'img-2']
imgNames.push(...obj[i]['indicators'].split(','))

将产生以下结果：

imageNames = ['img-1', 'img-2', 'b-819-0', 'b-819-1', 'b-819-2']

而不是导致：

imageNames = [
  'img-1', 'img-2',
  ['b-819-0', 'b-819-1', 'b-819-2']
]