时间戳

首页 > 解决方案 > 角度幻灯片

angular - 角度幻灯片

问题描述

大家好，有没有办法在 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'},
]

非常感谢。

标签： angularslideshow

解决方案

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

推荐阅读