Angular 角度幻灯片

大家好，有没有办法在以下网站上创建类似于此的幻灯片： 但在响应中，数据库中的图像字段包含多个由逗号分隔的图像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'}];

---

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

image='image1.png、image2.png、image3.png'；
imageURLs=image.split（“，”）.map（（x，i）=>{
返回{['url'+（i+1）]：x.trim（）}
});

解决方案2（使用）

image='image1.png、image2.png、image3.png'；
imageURLs=image.split（'，）.reduce（（a，v，i）=>{
a、 push（{[`url${i+1}`]：v.trim（）}）；
返回a；
}, []);

如果我理解正确，您只需将逗号分隔的字符串值

“image1.png、image2.png、image3.png”转换为此格式

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

解决方案1（使用）

image='image1.png、image2.png、image3.png'；
imageURLs=image.split（“，”）.map（（x，i）=>{
返回{['url'+（i+1）]：x.trim（）}
});

解决方案2（使用）

image='image1.png、image2.png、image3.png'；
imageURLs=image.split（'，）.reduce（（a，v，i）=>{
a、 push（{[`url${i+1}`]：v.trim（）}）；
返回a；
}, []);
带上一些地图应该可以到达那里。@mhdev，你为什么要制作这个“奇怪”数组？。确实不需要
imageurl=[{url:'image1.png'}，{url:'image2.png'}，{ur3:'image3.png'}]
？在a*ng中使用mannage会遇到麻烦，因为一个具有不同结构的数组和一些映射应该可以帮助您达到目的。@mhdev，为什么要创建这个“奇怪”数组？。确实不需要
imageurl=[{url:'image1.png'}，{url:'image2.png'}，{ur3:'image3.png'}]
？对于具有不同结构的数组，在a*ng中使用mannage会遇到麻烦。为什么使用reduce而不是map？我匆忙回答，但
map
肯定是更可读/更简单的版本：）使用
map
解决方案更新了答案。为什么使用reduce而不是map？我匆忙回答，但是
map
绝对是更可读/更简单的版本：）用
map
解决方案更新了答案。