角度幻灯片

问题描述

您好，有什么方法可以在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'},]

非常感谢。

解决方法

您可以利用以下功能将任何以逗号分隔的字符串转换为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'}];

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

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

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

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

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

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

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

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

angular slideshow