Блог

Вот мой вызов api:

 beforeMount(){
  this.get(`...`).then(data => {this.results = data.results;});
}
  

Вот моя возвращенная структура данных.

 Store - object
    name
    id
    products: [Array of objects]
        0: Object
            id: 1
            type: Object
                id: 543
                title: string
                ediable: object
                    categoryName: string
                    categoryId: number
        1: Object
            id: 2
            type: Object
                id: 544
                title: string
                ediable: object
                    categoryName: string
                    categoryId: number
        2: Object
            id: 3
            type: Object
                id: 545
                title: string
                ediable: object
                    categoryName: string
                    categoryId: number
  

Итак, в качестве примера допустим, у меня есть

 ediable.categoryName = fruit
type.title = apple
ediable.categoryName = dairy
type.title = yogurt
ediable.categoryName = fruit
type.title = banana
ediable.categoryName = grains
type.title = bagels
ediable.categoryName = grains
type.title = bread
ediable.categoryName = fruit
type.title = strawberry
ediable.categoryName = dairy
type.title = milk
ediable.categoryName = grains
type.title = muffins
ediable.categoryName = dairy
type.title = cheese
  

на моей странице просмотра у меня есть:

фрукты — яблоко,
молочные продукты — йогурт
, фрукты — банановые
злаки — рогалики,
злаки — хлеб,
фрукты — клубничные
молочные
продукты — молочные
злаки — маффины, молочные продукты — сыр

Я хотел бы, чтобы на мой взгляд, было:
фрукты — яблоко, банан, клубника
зерновые — рогалики, хлеб, кексы
молочные продукты — йогурт, молоко, сыр

Я читал об использовании reduce или groupBy, но, похоже, я не заставляю их работать. и мне интересно, какие возможные решения для этой проблемы. Это кажется очень простой проблемой, но почему-то у меня возникают проблемы с обдумыванием этого.

Обновления:

Итак, вот как далеко я продвинулся:

 productCategories: Model[] = [];

Array(data).reduce((acc, curr) => {
  let key;
  for(let x = 0; x<curr.products.length; x  ){
    key = curr.products[x].type.ediable.categoryName;
    this.productCategories.push(
      ...acc,
      [key]:[...(acc[key] || []), curr.products[x].type.title])
  }
}, {});
  

Но я показываю ошибку для [key]: , которая гласит:

 let key: any
Argument of type 'any[]' is not assignable to parameter of type 'Model'.
  Property 'id' is missing in type 'any[]'
  

ОБЪЕКТ ХРАНЕНИЯ:

 {
    "id": 1,
    "store": "Sample Store"
    "products": [{
        "id": 1,
        "type": {
            "id":1,
            "parentId": 100,
            "term": "Banana",
            "ediable": {
                "id": 100,
                "term": "Fruits"
            }
        }
    }, {
        "id": 2,
        "type": {
            "id":3,
            "parentId": 101,
            "term": "Apple",
            "ediable": {
                "id": 101,
                "term": "Fruits"
            }
        }
    }, {
        "id": 3,
        "type": {
            "id":3,
            "parentId": 102,
            "term": "Muffins",
            "ediable": {
                "id": 102,
                "term": "Grains"
            }
        }
    }, {"id": 4,
        "type": {
            "id":4,
            "parentId": 103,
            "term": "Cheese",
            "ediable": {
                "id": 103,
                "term": "Dairy"
            }
        }
    }, {
        "id": 5,
        "type": {
            "id":5,
            "parentId": 104,
            "term": "Bread",
            "ediable": {
                "id": 104,
                "term": "Grains"
            }
        }
    }, {
        "id": 6,
        "type": {
            "id":6,
            "parentId": 105,
            "term": "Yogurt",
            "ediable": {
                "id": 105,
                "term": "Dairy"
            }
        }
    }],
}
  

reduce сделает свое дело. Мы хотим собрать похожие категории в один массив. На каждом шаге мы либо добавляем к существующему ключу categoryName , либо добавляем новый ключ, что [key]: [...(acc[key] || []), curr.title] и делает.

 const data = {
    id: 1,
    store: 'Sample Store',
    products: [
        {
            id: 1,
            type: {
                id: 1,
                parentId: 100,
                term: 'Banana',
                ediable: {
                    id: 100,
                    term: 'Fruits'
                }
            }
        },
        {
            id: 2,
            type: {
                id: 3,
                parentId: 101,
                term: 'Apple',
                ediable: {
                    id: 101,
                    term: 'Fruits'
                }
            }
        },
        {
            id: 3,
            type: {
                id: 3,
                parentId: 102,
                term: 'Muffins',
                ediable: {
                    id: 102,
                    term: 'Grains'
                }
            }
        },
        {
            id: 4,
            type: {
                id: 4,
                parentId: 103,
                term: 'Cheese',
                ediable: {
                    id: 103,
                    term: 'Dairy'
                }
            }
        },
        {
            id: 5,
            type: {
                id: 5,
                parentId: 104,
                term: 'Bread',
                ediable: {
                    id: 104,
                    term: 'Grains'
                }
            }
        },
        {
            id: 6,
            type: {
                id: 6,
                parentId: 105,
                term: 'Yogurt',
                ediable: {
                    id: 105,
                    term: 'Dairy'
                }
            }
        }
    ]
};

const products = data.products.reduce((acc, curr) => {
    const key = curr.type.ediable.term;
    return {
        ...acc,
        [key]: [...(acc[key] || []), curr.type.term]
    };
}, {});

const mappedData = {
    ...data,
    products
};

console.log(mappedData);
// output of results
// { id: 1,
//  store: 'Sample Store',
//  products:
//   { Fruits: [ 'Banana', 'Apple' ],
//     Grains: [ 'Muffins', 'Bread' ],
//     Dairy: [ 'Cheese', 'Yogurt' ] } }