Angular 幻灯片

Question

大家好，有什么方法可以在 Angular 中创建类似于以下网站上的幻灯片： https://americansecurestorage.com/ 但在响应中，数据库中的图像字段包含多个用逗号分隔的图像 URL。例如，这是来自服务器的响应：

[
   {"number" : "1", "2", "3"},
   {"image" : "image1.png,image2.png,image3.png"},
   {"text" : "someText"}
]

或者更具体地说，如何将 JSON 对象的那部分转换为：

imageURLs = [
   {url1: 'image1.png'},
   {url2: 'image2.png'},
   {url3: 'image3.png'},
]

非常感谢。

Answer 1

您可以利用以下函数将任何逗号分隔的字符串转换为 JSON

const CSV_to_JSON = (data, delimiter = ',') => {
      const titles = data.slice(0, data.indexOf('\n')).split(delimiter);
      return data
        .slice(data.indexOf('\n') + 1)
        .split('\n')
        .map(v => {
          const values = v.split(delimiter);
          return titles.reduce((obj, title, index) => ((obj[title] = values[index]), obj), {});
        });
    };

用法示例

    console.log(CSV_to_JSON('url1,url2\na,b\nc,d')); 
// [{'url1': 'image1.png', 'url2': 'image2.png'}, {'url1': 'image3.png', 'url2': 'image4.png'}];

Answer 2

如果我没理解错的话，你要做的就是将逗号分隔的字符串值 "image1.png,image2.png,image3.png" 转换为这种格式

[
    { url1: 'image1.png' }, 
    { url2: 'image2.png' }, 
    { url3: 'image3.png' }
]

解决方案 1（使用 Array.map）

image = 'image1.png,image2.png,image3.png';

imageURLs = image.split(",").map((x, i) => { 
    return { ['url' + (i + 1)]: x.trim() }
});

解决方案 2（使用 Array.reduce）

image = 'image1.png,image2.png,image3.png';

imageURLs = image.split(',').reduce((a, v, i) => { 
    a.push({ [`url${i+1}`] : v.trim() });
    return a;
}, []);

Angular 幻灯片

Angular slideshow

slideshow

angular