Home > Mobile >  How to change order of an object in array Angular?
How to change order of an object in array Angular?

Time:10-25

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.

  • Related