I have an array of objects containing some information. I am not able to render them in the order I want and I need some help with that. I render them like this:
this.state.data.map(
(item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)
Is it possible to sort them ascending with item.timeM
in that map()
-function or do I have to sort them before i use map?
This question is related to
javascript
reactjs
Try lodash sortBy
import * as _ from "lodash";
_.sortBy(data.applications,"id").map(application => (
console.log("application")
)
)
Read more : lodash.sortBy
this.state.data.sort((a, b) => a.item.timeM > b.item.timeM).map(
(item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)
You will need to sort your object before mapping over them. And it can be done easily with a sort()
function with a custom comparator definition like
var obj = [...this.state.data];
obj.sort((a,b) => a.timeM - b.timeM);
obj.map((item, i) => (<div key={i}> {item.matchID}
{item.timeM} {item.description}</div>))
Chrome browser considers integer value as return type not boolean value so,
this.state.data.sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1).map(
(item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)
const list = [
{ qty: 10, size: 'XXL' },
{ qty: 2, size: 'XL' },
{ qty: 8, size: 'M' }
]
list.sort((a, b) => (a.qty > b.qty) ? 1 : -1)
console.log(list)
_x000D_
Out Put :
[
{
"qty": 2,
"size": "XL"
},
{
"qty": 8,
"size": "M"
},
{
"qty": 10,
"size": "XXL"
}
]
Source: Stackoverflow.com