按标题对 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屋!