Как замапить массив?

Question

[lololoshka2010]

items.map((obj) => <PizzaBlock key={obj.pizzas.title} {...obj.pizzas} />)

есть объект,получаемый с мокапи.я его мапю,но из-за того что он на мокапи,нужно объект оборачивать в массив.подскажите,как замапить это?

[
  {
    "pizzas": [{
        "id": 0,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/f035c7f46c0844069722f2bb3ee9f113_584x584.jpeg",
        "title": "Пепперони Фреш с перцем",
        "types": [0, 1],
        "sizes": [26, 30, 40],
        "price": 803,
        "category": 0,
        "rating": 4
      },
      {
        "id": 1,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/2ffc31bb-132c-4c99-b894-53f7107a1441.jpg",
        "title": "Сырная",
        "types": [0],
        "sizes": [26, 40],
        "price": 245,
        "category": 1,
        "rating": 6
      },
      {
        "id": 2,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/6652fec1-04df-49d8-8744-232f1032c44b.jpg",
        "title": "Цыпленок барбекю",
        "types": [0],
        "sizes": [26, 40],
        "price": 295,
        "category": 1,
        "rating": 4
      },
      {
        "id": 3,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/af553bf5-3887-4501-b88e-8f0f55229429.jpg",
        "title": "Кисло-сладкий цыпленок",
        "types": [1],
        "sizes": [26, 30, 40],
        "price": 275,
        "category": 2,
        "rating": 2
      },
      {
        "id": 4,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/b750f576-4a83-48e6-a283-5a8efb68c35d.jpg",
        "title": "Чизбургер-пицца",
        "types": [0, 1],
        "sizes": [26, 30, 40],
        "price": 415,
        "category": 3,
        "rating": 8
      },
      {
        "id": 5,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/1e1a6e80-b3ba-4a44-b6b9-beae5b1fbf27.jpg",
        "title": "Крэйзи пепперони",
        "types": [0],
        "sizes": [30, 40],
        "price": 580,
        "category": 2,
        "rating": 2
      },
      {
        "id": 6,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/d2e337e9-e07a-4199-9cc1-501cc44cb8f8.jpg",
        "title": "Пепперони",
        "types": [0, 1],
        "sizes": [26, 30, 40],
        "price": 675,
        "category": 1,
        "rating": 9
      },
      {
        "id": 7,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/d48003cd-902c-420d-9f28-92d9dc5f73b4.jpg",
        "title": "Маргарита",
        "types": [0, 1],
        "sizes": [26, 30, 40],
        "price": 450,
        "category": 4,
        "rating": 10
      },
      {
        "id": 8,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/ec29465e-606b-4a04-a03e-da3940d37e0e.jpg",
        "title": "Четыре сезона",
        "types": [0, 1],
        "sizes": [26, 30, 40],
        "price": 395,
        "category": 5,
        "rating": 10
      },
      {
        "id": 9,
        "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/Pizza/ru-RU/30367198-f3bd-44ed-9314-6f717960da07.jpg",
        "title": "Овощи и грибы ",
        "types": [0, 1],
        "sizes": [26, 30, 40],
        "price": 285,
        "category": 5,
        "rating": 7
      }
    ]
  }

Comments

[Алексей Дубровин]

есть объект,получаемый с мокапи.я его мапю,но из-за того что он на мокапи,нужно объект оборачивать в массив.подскажите,как замапить это?

В чем проблема?
Какая ошибка?
Что не получается?
Зачем мне информация выше?

[Алексей Уколов]

из-за того что он на мокапи,нужно объект оборачивать в массив

Какое-то странное утверждение. С чего вы взяли?

Answer 1

[Алексей Уколов]

Зачем итерировать по кривому формату данных, если можно просто сразу его превратить в нормальный?

setItems(json[0].pizzas)
...
items.map((pizza) => <PizzaBlock key={pizza.title} {...pizza} />)

Answer 2

[romaro]

Только вам нужно будет каждый key отдельно прописать:

items[0]['pizzas'].map((obj) => <PizzaBlock key={ obj.title } { ...obj } />)

https://playcode.io/903034

Comments

[Алексей Уколов]

Распределение здесь не сработает

Чего это? Есть у объекта спрэд. И такой паттерн передачи пропсов в компонент вполне стандартен.

[romaro]

Алексей Уколов, это только у объектов, для которых реализован [Symbol.iterator]. Не получится без него: https://playcode.io/903033

[WbICHA]

romaro, ты это сейчас серьёзно?

[Алексей Уколов]

romaro, "в пустоту" заспрэдить действительно не получится. Но в данном случае мы спрэдим в объект и JSX это спокойно пережуёт.

[romaro]

WbICHA, Алексей Уколов, поскольку я плохо знаком с синтаксисом Реакта (а вопрос имеет два тега, один из которых относится к чистому JS), то с ходу и не сообразил, что в пропс key сразу передается объект и фигурные скобки в записи {...obj.pizzas} означают банальную переупаковку, а не метку шаблонизатора. В таком случае (если нужно, чтобы title оказался на первом месте), проще, наверное, записать так:
key={ pizza.title, ...pizza }

[Алексей Уколов]

Нет, вы снова неправильно написали. У автора в вопросе и у меня в ответе уже есть пример корректного синтаксиса.

[WbICHA]

romaro, только вот проблема в том, что в первую очередь ты плохо знаешь сам жс, и этот твой пример это отлично подтверждает.

[romaro]

Алексей Уколов, нашел в документации и разобрался.

WbICHA, с каждым днем все лучше))