I have this json and I need to sort it and to find a object that have url in avatarUrl and set it as first object. How can we do this in angular ?
[
{
"id": 1,
"avatarUrl": null,
"age": 20
},
{
"id": 2,
"avatarUrl": null,
"age": 22
},
{
"id": 3,
"avatarUrl": "https://get-edu.kz/wp-content/uploads/2020/04/helpbox-contact.jpg",
"age": 20
},
{
"id": 4,
"avatarUrl": null,
"age": 18
}
]
CodePudding user response:
I assumed that you need to sort alphabetically descending order with nulls as last
I referred from here
let arr = [
{
"id": 1,
"avatarUrl": null,
"age": 20
},
{
"id": 2,
"avatarUrl": null,
"age": 22
},
{
"id": 3,
"avatarUrl": "https://get-edu.kz/wp-content/uploads/2020/04/helpbox-contact.jpg",
"age": 20
},
{
"id": 4,
"avatarUrl": null,
"age": 18
}
]
function compare(a, b) {
// equal items sort equally
if (a.avatarUrl === b.avatarUrl) {
return 0;
}
// nulls sort after anything else
else if (a.avatarUrl === null) {
return 1;
}
else if (b.avatarUrl === null) {
return -1;
}
};
arr.sort( compare );
console.log(arr)
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
From your example i made this typescript code :
let yourArray = [
{
"id": 1,
"avatarUrl": null,
"age": 20
},
{
"id": 2,
"avatarUrl": null,
"age": 22
},
{
"id": 3,
"avatarUrl": "https://get-edu.kz/wp-content/uploads/2020/04/helpbox-contact.jpg",
"age": 20
},
{
"id": 4,
"avatarUrl": null,
"age": 18
}
]
let sortedArray = yourArray.sort((a, b) => {
// same value OR null on both sides
if (a.avatarUrl === b.avatarUrl) {
return 0;
}
else if (a.avatarUrl !== null) {
// the following part handles the fact that we can get two different URL which are not null
// you have to improve this part according to your needs
if(b.avatarUrl !== null){
return a.avatarUrl > b.avatarUrl ? -1 : 1; // the equality has already been handled on the first condition
}
return -1;
}
else {
return 1;
}
});
console.log(sortedArray);
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
it returns this :
[
{
id: 3,
avatarUrl: 'https://get-edu.kz/wp-content/uploads/2020/04/helpbox-contact.jpg',
age: 20
},
{ id: 1, avatarUrl: null, age: 20 },
{ id: 2, avatarUrl: null, age: 22 },
{ id: 4, avatarUrl: null, age: 18 }
]
If you need to add some more filter logic, you can improve the code inside the sort function, according to your needs, but the idea is still the same : using the sort function and implement it to sort your objects.