Слайд-шоу Angular

#angular #slideshow

#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'},
]

Большое спасибо.

1. String.split с некоторой картой должен привести вас к этому.

2. @mhdev, почему вы хотите создать этот «странный» массив ?. вы уверены, что не хотите imageURLs = [{url: 'image1.png'},{url: 'image2.png'},{ur3: 'image3.png'}] ? вы столкнетесь с трудностями при управлении в * ng для массива с другой структурой

Ответ №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,url2na,bnc,d')); 
// [{'url1': 'image1.png', 'url2': 'image2.png'}, {'url1': 'image3.png', 'url2': 'image4.png'}];

Ответ №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;
}, []);