0

Я получаю данные с сервера во Vue. Ответ выглядит следующим образом:

    {
  "items": [
    {
      "id": 1,
      "title": "Носки",
      "slug": "noski",
      "price": 199,
      "colors": [
        {
          "id": 44,
          "color": {
            "id": 20,
            "title": "Red",
            "code": "#dd0808"
          },
          "gallery": [
            {
              "file": {
                "url": "https://vue-moire.skillbox.cc/uploads/file/3/2/4/324e1f4fb34931a1d367602a730a75b5.jpg",
                "name": "324e1f4fb34931a1d367602a730a75b5.jpg",
                "originalName": "Rectangle 121.jpg",
                "extension": "jpg",
                "size": "4.3 Кб"
              }
            }
          ]
        }
      ],
      "seasons": [
        {
          "id": 2,
          "title": "Осень",
          "code": "autumn",
          "productsCount": 10
        },
        {
          "id": 4,
          "title": "Весна",
          "code": "spring",
          "productsCount": 10
        }
      ],
      "materials": [
        {
          "id": 2,
          "title": "Шерсть",
          "code": "wool",
          "productsCount": 4
        }
      ]
    }
  ]
}

Мне необходимо добраться до url изображения. Вот код, с помощью котрого я пытался получить данные по url:

data() {
    return {
      productsData: null,
    };
  },

computed: {
    products() {
      return this.productsData ? this.productsData.items : [];
    },
    image() {
      return this.productsData.items.flatMap((item) => {
        return item.colors.flatMap((itemI) => {
          return itemI.gallery.flatMap((itemIm) => {
            return {
              ...itemIm,
              image: itemIm.file.url,
            };
          });
        });
      });
    },
  },

Через image() получается вывести изображения, но тогда они выводятся все (некоторые объекты содержат по 2 и более изображения). А мне нужно только первое, которое попадается. Также через нее нет возможности обратиться к "title", "id" и "price". Подскажите, пожалуйста, как можно это все уместить в одном computed свойстве или решить данную проблему?

1 ответ 1

0
image() {
      var images = this.productsData.items.flatMap((item) => {
        return item.colors.flatMap((itemI) => {
          return itemI.gallery.flatMap((itemIm) => {
            return {
              id: item.id,
              title: item.title,
              price: item.price,
              ...itemIm,
              image: itemIm.file.url,
            };
          });
        });
      });
      return images.length ? images[0] : [];
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.