Question

这是我的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"
            }
        }
    }],
}

Answer 1

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

按标题分组API结果

1 个答案: