按标题对 api 结果进行分组 [英] Grouping api results by title

问题描述

这是我的 api 调用:

Here is my api call:

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

这是我返回的数据结构.

Here is my returned data structure.

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

在我的视图页面中，我有:

in my view page i have:

水果-苹果
乳制品 - 酸奶
水果 - 香蕉
谷物 - 百吉饼
谷物 - 面包
水果 - 草莓
乳制品 - 牛奶
谷物 - 松饼
乳制品 - 奶酪

fruit - apple
dairy - yogurt
fruit - banana
grains - bagels
grains - bread
fruit - strawberry
dairy - milk
grains - muffins
dairy - cheese

我希望我的观点是:
水果 - 苹果、香蕉、草莓
谷物 - 百吉饼、面包、松饼
乳制品——酸奶、牛奶、奶酪

I would like for my view to be:
fruit - apple, banana, strawberry
grains - bagels, bread, muffins
dairy - yogurt, milk, cheese

我读到有关使用 reduce 或 groupBy 的信息，但我似乎没有让它们起作用.我想知道这个问题有什么可能的解决方案.这似乎是一个非常直接的问题，但不知何故我无法解决这个问题.

I read about using reduce or groupBy but i don't seem to get them to work. and i wonder what possible solutions for this issue. It seems like a very straight forward propblem but somehow i am having trouble wrapping my head around this.

更新:

所以这是我得到了多远:

So this is how far i got:

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]: 的错误，指出:

But i am showing an error for [key]: that states:

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] 确实如此.

reduce will do the trick. We want to collect the similar categories into the same array. At each step we either append to an existing categoryName or add a new key which is what [key]: [...(acc[key] || []), curr.title] does.

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

这篇关于按标题对 api 结果进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！