Как группировать данные в ionic 5?

#angular #ionic-framework

#angular #ionic-framework

Вопрос:

У меня проблема здесь, в Ionic 5, где я хочу заказать некоторые продукты по их категории. Я читал, и кажется, что с помощью каналов я могу добиться этого, но я не понимаю, как это работает.

Мой JSON:

 {
    "categories": [
        {
            "id": 1,
            "name": "Test",
            "items": 3
        },
        {
            "id": 14,
            "name": "Test 2",
            "items": 2
        }
    ],
    "items": [
        {
            "id": 4,
            "category_id": 1,
            "name": "Vin",
            "description": "fsdfsdfsdfsd",
            "price": 25,
            "discounted_price": 22,
            "weight": 244,
            "estimated_prep_time": "00:20:30",
            "image": null
        },
        {
            "id": 5,
            "category_id": 14,
            "name": "test",
            "description": "sdfadfafd",
            "price": 22,
            "discounted_price": 21,
            "weight": 500,
            "estimated_prep_time": "00:20:30",
            "image": null
        },
        {
            "id": 6,
            "category_id": 14,
            "name": "Test",
            "description": "lorem ipsum dolo sit met",
            "price": 25,
            "discounted_price": null,
            "weight": 2555,
            "estimated_prep_time": "00:20:30",
            "image": null
        },
    ]
}
 

Я хочу отфильтровать их по «Идентификатору категории», чтобы они могли быть примерно такими:

Категория 1

  • Пункт 2
  • Пункт 5

Категория 2

  • Пункт 1
  • Пункт 3

Категория 3

  • Пункт 4
  • Пункт 5

Заранее спасибо!

Ответ №1:

Это то, что вы ищете?

 let output = data.categories.map(category => {
  return {...category, items: data.items.filter(item => {
    return item.category_id == category.id;
  })};
});
 
 [
  {
    "id": 1,
    "name": "Test",
    "items": [
      {
        "id": 4,
        "category_id": 1,
        "name": "Vin",
        "description": "fsdfsdfsdfsd",
        "price": 25,
        "discounted_price": 22,
        "weight": 244,
        "estimated_prep_time": "00:20:30",
        "image": null
      }
    ]
  },
  {
    "id": 14,
    "name": "Test 2",
    "items": [
      {
        "id": 5,
        "category_id": 14,
        "name": "test",
        "description": "sdfadfafd",
        "price": 22,
        "discounted_price": 21,
        "weight": 500,
        "estimated_prep_time": "00:20:30",
        "image": null
      },
      {
        "id": 6,
        "category_id": 14,
        "name": "Test",
        "description": "lorem ipsum dolo sit met",
        "price": 25,
        "discounted_price": null,
        "weight": 2555,
        "estimated_prep_time": "00:20:30",
        "image": null
      }
    ]
  }
]