如何解决反应原生平面列表中的 groupby
我正在使用 fetch 和 Flatlist 来获取和显示来自 laravel rest api 的 json 数据。我的 laravel api 输出就是这样
[
{"teacher": "alex","student":"roger","class":"6"}
{"teacher": "alex","student":"simmon","class":"6"}
{"teacher": "alexandra","student":"henry","class":"8"}
....
]
在 react native 中,我使用 fetch api 从 laravel 中获取数据
fetch('http://11.1.1.1:8000/api/get_data/' {
method: 'get',})
.then((response) => response.json())
.then((responseJson) => {
this.setState({ record: responseJson.data})
})
.catch((error) => {
console.error(error);
});
在平面列表中,我显示这样的数据
<FlatList
data={this.state.record}
keyExtractor={(item,index) => index + ""}
ListHeaderComponent={this.tableHeader}
stickyHeaderIndices={[0]}
renderItem={
({item}) => (
<Text>{item.data.student}</Text>
<Text>{item.data.class}</Text>
)
}
/>
我的输出就是这样
sr.no student class
1 roger 6
2 simmon 6
3 henry 8
但我想按老师姓名分组,我想要的输出就是这样
alex //teacher name
sr.no student class
1 roger 6
2 simmon 6
alexendra //teacher name
sr.no student class
1 henry 8
如何在flatlist中使用reduce函数来实现那种输出?
解决方法
您可以构建自己的函数:
var groupBy = function(xs,key) {
return xs.reduce(function(rv,x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
},{});
};
console.log(groupBy(this.state.record,'teacher'))
或者您可以使用外部库,例如 lodash:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。