Question

大家好高级网站开发人员，我是网站开发的新手。我使用lightGallery插件来查看图像。但我的图像路径存储在数组中。在数组元素中始终是动态的，来自ajax响应。这是我的阵列：

     var data = { "result" : [ 
                                { "file_name"  : "a.jpg" },
                                { "file_name"  : "b.png"},
                                  ......................
                             ]
     }

//这是Lightgallery数组语法

     $(this).lightGallery({
       dynamic: true,
       dynamicEl: [{"src": 'your image path'}, 
                   {'src': 'your image path'},
                    ........................
                  ]
     })

//我想这样：

     $(this).lightGallery({
       dynamic: true,
       dynamicEl: [{"src": 'a.jpg'}, 
                   {'src': 'b.jpg'},
                   ................
                  ]
     })

怎么做？可以吗？

感谢宝贵的帮助。

Answer 1

Array.prototype.map()可以方便地根据原件创建新的arrays。

请参阅下面的实例。

// Input.
const input = {
  result: [ 
    { "file_name"  : "a.jpg" },
    { "file_name"  : "b.png"}
  ]
}

// To Dynamic.
const toDynamic = ({result}) => ({
  dynamic: true,
  dynamicEl: result.map(x => ({src: x.file_name}))
})

// Output.
const output = toDynamic(input)

// Proof.
console.log(output)

Answer 2

您的原始var data实际上是一个对象 - 请参阅它如何从{开始。

const data = { "result" : [ 
  { "file_name"  : "a.jpg" },
  { "file_name"  : "b.png"},
]};
const dynamicElArr = data.result.map(({ file_name: src }) => ({ src }));
console.log(dynamicElArr);

然后您可以将其用于dynamicEl。

我们可以将JSON对象数组转换为lightGalery对象数组吗？

2 个答案: