我承认 Javascript 不是我最擅长的语言,而且 React Native 是非常新的,所以,可能有一种我没有看到的明显简单的方法来做到这一点。
我有一个 API,可以以简单的结构呈现一些交易数据:
[
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
},
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
},
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
]
我想使用SectionList组件来呈现这些数据,并按日期划分交易。我(可能很粗略)解决这个问题的尝试是将这些数据转换为以下结构:
[
{
"date": "2021-09-10",
"transactions": [
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
}
]
},
{
"date": "2021-09-09",
"transactions": [
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
}
]
},
{
"date": "2021-09-07",
"transactions": [
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
]
}
]
但老实说,我不知道如何转换这些数据(或者是否有更好的方法来解决这个问题)。我开始使用 Lodash 的 groupBy 函数,这看起来很有前途,但看起来SectionList不需要一个对象,它需要一个数组。
将 groupBy 的输出直接转换为数组会丢弃键,并且我得到了分组数据,但节标题没有明确的值。
同样,可能有一些非常简单的方法来解决这个问题,数据始终以平面数组的形式出现。我感谢任何人可以向我指出的任何指导、帮助或示例。
const input = [
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
},
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
},
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
]
const result = input.reduce((accum, current)=> {
let dateGroup = accum.find(x => x.date === current.date);
if(!dateGroup) {
dateGroup = { date: current.date, transactions: [] }
accum.push(dateGroup);
}
dateGroup.transactions.push(current);
return accum;
}, []);
console.log(result)
给定一个数组,每当您的结果期望具有相同数量的元素时,请使用
map
,但由于您的结果具有不同数量的元素,请使用 reduce
,如上所示。这个想法是通过 reduce
,循环每个元素,看看是否可以找到该元素,并将当前元素推入列表
lodash
groupBy
只是帮助您处理分组数据,您应该通过将分组数据转换为您的格式来处理分组数据。
const input = [
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
},
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
},
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
];
const groupedArray = _.groupBy(input, "date");
let result = [];
for (const [key, value] of Object.entries(groupedArray)) {
result.push({
'date': key,
'transactions': value
})
}
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
简单
const data =
[ { id: 1, title: 'Apple Store', date: '2021-09-10', amount: '$100.00' }
, { id: 41, title: 'Zulauf, Walter and Metz', date: '2021-09-10', amount: '$14.00' }
, { id: 9, title: 'Aufderhar PLC', date: '2021-09-09', amount: '$78.00' }
, { id: 10, title: 'Bayer and Sons', date: '2021-09-07', amount: '$67.00' }
]
const res = Object.entries(data.reduce((r,{id,title,date,amount})=>
{
r[date] = r[date] ?? []
r[date].push({id,title,date,amount})
return r
},{})).map(([k,v])=>({date:k,transactions:v}))
console.log( res )
.as-console-wrapper { max-height: 100% !important; top: 0 }
使用 lodash,您可以按
date
进行分组,然后映射到所需的表格:
const input = [{"id":1,"title":"Apple Store","date":"2021-09-10","amount":"$100.00"},{"id":41,"title":"Zulauf, Walter and Metz","date":"2021-09-10","amount":"$14.00"},{"id":9,"title":"Aufderhar PLC","date":"2021-09-09","amount":"$78.00"},{"id":10,"title":"Bayer and Sons","date":"2021-09-07","amount":"$67.00"}];
const result = _.map(
_.groupBy(input, 'date'),
(transactions, date) => ({ date, transactions })
)
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
你可以使用loadash
var result = _(data)
.groupBy(item => item.date)
.map((value, key) => ({date: key, transactions: value}))
.value();
这是我编写的一个 TypeScript 实用函数,用于执行类似的操作:
// from https://stackoverflow.com/a/49752227
type KeyOfType<T, V> = keyof {
[P in keyof T as T[P] extends V? P: never]: any
};
// data[key] must be string, number, or symbol
export function groupBy<T>(data: T[], key: KeyOfType<T, string | number | symbol>) {
const collect: {[index: string | number | symbol]: T[]} = {};
for (let item of data) {
const key_value = item[key] as string | number | symbol;
if (key_value in collect) collect[key_value].push(item);
else collect[key_value] = [item];
}
return collect;
};
关于以上数据:
const data = [
{id: 1, title: 'Apple Store', date: '2021-09-10', amount: '$100.00'},
{id: 41, title: 'Zulauf, Walter and Metz', date: '2021-09-10', amount: '$14.00'},
{id: 9, title: 'Aufderhar PLC', date: '2021-09-09', amount: '$78.00'},
{id: 10, title: 'Bayer and Sons', date: '2021-09-07', amount: '$67.00'},
];
groupBy(data, 'date');
// yields:
{
'2021-09-07': [{id: 10, title: 'Bayer and Sons', date: '2021-09-07', amount: '$67.00'}],
'2021-09-09': [{id: 9, title: 'Aufderhar PLC', date: '2021-09-09', amount: '$78.00'}],
'2021-09-10': [
{id: 1, title: 'Apple Store', date: '2021-09-10', amount: '$100.00'},
{id: 41, title: 'Zulauf, Walter and Metz', date: '2021-09-10', amount: '$14.00'},
],
};