如何将Ajax返回的JSON对象数组转换为lightGallery的dynamicEl数组？

当然可以实现啦，这其实就是个简单的数组转换问题，几步就能搞定～

核心思路 #

你需要把Ajax返回的data.result数组里的每个元素，从{ "file_name": "xxx.jpg" }格式转换成lightGallery要求的{ "src": "xxx.jpg" }格式。JavaScript的Array.map()方法正好适合做这种批量转换。

具体步骤 #

1. 处理数组转换
   拿到Ajax响应的data对象后，用map()遍历数组，把每个元素的file_name提取出来，包装成lightGallery需要的结构：

   // 假设你已经通过Ajax获取到了data对象
   const dynamicImages = data.result.map(item => {
     return { src: item.file_name };
   });
   

   要是想写得更简洁，还可以用箭头函数的简写形式：

   const dynamicImages = data.result.map(item => ({ src: item.file_name }));
   

2. 传入lightGallery配置
   把转换好的dynamicImages数组直接放到dynamicEl参数里即可：

   $(this).lightGallery({
     dynamic: true,
     dynamicEl: dynamicImages
   });
   

额外小提示 #

如果你的图片都存放在特定文件夹（比如/assets/images/），可以直接在转换时加上路径前缀，避免每个文件名都手动加：

const dynamicImages = data.result.map(item => ({
  src: '/assets/images/' + item.file_name
}));

这样就能完美适配lightGallery的动态加载需求啦～

内容的提问来源于stack exchange，提问作者Sen Soeurn