Create a function to sort an array of objects by their values in Javascript

Question

This is an array of objects:

const movies = [
  {
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Die Hard",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
  },
]

~~I would like to sort them by title and genre.name.~~

I want to create 2 new arrays, one is sorted by title and the other one is sorted by genre.name.

So far I tried this, but it was clearly wrong:

 const sortMovies = (item) => {
  movies.sort((a, b) =>
   a.item> b.item? 1 : b.item> a.item? -1 : 0
   );
 };

const sortTitle = sortMovies(title);
const sortGenre = sortMovies(genre.name);

Please help me find a solution to this. I really appreciate it!

Do you want to sort them with both of those properties OR do you want to create a generic function pass different parameters as a string? — adiga
– adiga, Commented Feb 2, 2021 at 5:59
@adiga I think the OP wants to sort title then genre.name. Otherwise, the result looks weird :) — Nguyễn Văn Phong
– Nguyễn Văn Phong, Commented Feb 2, 2021 at 6:01
@adiga hi, I want to create 2 new arrays, one is sorted by title and the other one is sorted by genre.name. Sorry for the confusion. — Tui
– Tui, Commented Feb 2, 2021 at 6:05

Nguyễn Văn Phong · Accepted Answer · 2021-02-02 06:31:19Z

1

It seems that you want to compare title then genre.name.

So you can combine those criteria in this way

a.title.localeCompare(b.title) || a.genre.name.localeCompare(b.genre.name)

const movies = [
  {
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Die Hard",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "B" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "A" },
  },
];

const sortMovies = (data) => {
  data.sort((a, b) => 
            a.title.localeCompare(b.title)|| a.genre.name.localeCompare(b.genre.name));
}
sortMovies(movies);

console.log(movies);

As you can see, title = Get Out is also sorted by genre.name

Edited

I want to create 2 new arrays, one is sorted by title and the other one is sorted by genre.name.

In case you want to create a generic method

  const sortMovies = (data, getValueByProp) => {
  data.sort((a, b) => 
  {
    const v1 = getValueByProp(a);
    const v2 = getValueByProp(b);
    return v1.localeCompare(v2);
  });
}
sortMovies(movies, (item) => item.title);
sortMovies(movies, (item) => item.genre.name);

const movies = [
  {
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Die Hard",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "B" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "A" },
  },
];

const sortMovies = (data, getValueByProp) => {
  data.sort((a, b) => 
  {
    const v1 = getValueByProp(a);
    const v2 = getValueByProp(b);
    return v1.localeCompare(v2);
  });
}
sortMovies(movies, (item) => item.title);
console.log(movies);

sortMovies(movies, (item) => item.genre.name);
console.log(movies);

edited Feb 2, 2021 at 6:31

answered Feb 2, 2021 at 5:55

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tui Over a year ago

Thanks for your input. I want to create 2 new arrays, one is sorted by title and the other one is sorted by genre.name. Sorry for the confusion. May I ask in which situation I should use your code? It looks interesting. I appreciate it!

Nguyễn Văn Phong Over a year ago

@adiga I've just updated my answer with generic method, Pls, take a look at it, sir :)

Tui Over a year ago

Awesome! I think it does after running code snippet. Thank you so much!! By the way, how should I use React's onClick to run this function please? Since we can't do this: onClick = sortMovies(movies, (item) => item.title) as I understand.

Nguyễn Văn Phong Over a year ago

Regarding your new issue related to React's onClick, you should give us more of your sample code or create a new question? then tag me I'll help you. Because we should not make this question too complex

Tui Over a year ago

Let us continue this discussion in chat.

Azad · Accepted Answer · 2021-02-02 06:23:18Z

1

the following code snippet may help you

const movies = [
  {
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Die Hard",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
  },
];


//sort by title
var sortedByTitle = movies.sort( (a, b) => {

if(a.title < b.title) { return -1; }
    if(a.title > b.title) { return 1; }
    return 0;

} );

console.log(sortedByTitle);

//sort by genre
var sortedGenre = movies.sort( (a, b) => {

if(a.genre.name < b.genre.name) { return -1; }
    if(a.genre.name > b.genre.name) { return 1; }
    return 0;

} );

console.log(sortedGenre);

answered Feb 2, 2021 at 6:23

Azad

5,2725 gold badges31 silver badges59 bronze badges

3 Comments

Nguyễn Văn Phong Over a year ago

No, The OP wants to create a generic method instead.

Tui Over a year ago

@Phong Yes, the real objects I'm working on have many keys. Here I simplified it to only 2.

Azad Over a year ago

@Tui do you need a function which sort by given property name? some thing like sortMovies("title") or sortMovies("genre/name")

Bala.Raj · Accepted Answer · 2021-02-02 06:25:37Z

1

just change it like this

const sortMovies = (item) => {
       return movies.sort((a, b) =>
          a[item]> b[item]? 1 : b[item]> a[item]? -1 : 0
        );
      };
    
const sortTitle = sortMovies("title");

For more nested: I don't recommend this because of performance issue. Just to show the possibility

function getPropByString(obj, propString) {
    if (!propString)
        return obj;

    var prop, props = propString.split('.');

    for (var i = 0, iLen = props.length - 1; i < iLen; i++) {
        prop = props[i];

        var candidate = obj[prop];
        if (candidate !== undefined) {
            obj = candidate;
        } else {
            break;
        }
    }
    return obj[props[i]];
}
const sortMovies = (item) => {
    return movies.sort((a, b) =>
      getPropByString(a,item) > getPropByString(b,item)? 1 : getPropByString(b,item) > getPropByString(a,item) ? -1 : 0
    );
  };

  const sortTitle = sortMovies("title");
  const sortGenre = sortMovies("genre.name");

edited Feb 2, 2021 at 6:25

answered Feb 2, 2021 at 6:07

Bala.Raj

1,0619 silver badges18 bronze badges

2 Comments

Tui Over a year ago

Thanks, Bala! I tried the first part, but it was undefined after I ran console.log(sortTitle)?

Bala.Raj Over a year ago

oh my bad! "return" keyword

KR Tirtho · Accepted Answer · 2021-02-02 06:33:12Z

A sort higher order function only takes 1/-1 so passing 0 shouldn't work as far as I know.. But if you wanna sort the items as the item provided by the sortMovies function argument you have to do the following:

const movies = [
  {
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Die Hard",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
  },
]

let sortsMovies = (properties) => {
  return movies.sort((a, b) => {
    try {
      const propertyArr = properties.split(".");
      // this gets properties from the end of the object nest
      const props1 = propertyArr.reduce((obj, prop) => obj[prop], a);
      const props2 = propertyArr.reduce((obj, prop) => obj[prop], b);

      return props1 > props2 ? 1 : -1;
    }
    catch (error) {
      console.error('error:', error)
    }
  });
}

const genre = sortsMovies("genre.name")
const title = sortsMovies("title")
console.log('title:', title)
console.log('genre:', genre)

This should sort the Array of Object with the provided property

Collectives™ on Stack Overflow

Create a function to sort an array of objects by their values in Javascript

4 Answers 4

Edited

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Edited

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related