How to sort the array of objects on the basis of an element in another array of objects?

Question

Let per & con be the arrays of objects. I want to sort the per array as per the ascending order of continent of con array. What to do? Just use sort and find functions only. Here's my code:

function checkContinent(pe, co) {
  const cc = pe.sort(function(a) {
    let fa = co.find(function(b) {
      return b.city === a.city;
    });
    fa.sort(sortContAsc);
    return fa;
  });
  return cc;
}

function sortContAsc(s1, s2) {
  return s1.continent.localeCompare(s2.continent);
}

const per = [{
    name: "Mary",
    city: "London"
  },
  {
    name: "Anita",
    city: "Paris"
  },
  {
    name: "Edward",
    city: "New York"
  },
  {
    name: "Thomas",
    city: "Rome"
  },
  {
    name: "Robin",
    city: "Seattle"
  },
  {
    name: "Sophia",
    city: "Los Angeles"
  },
  {
    name: "Bruce",
    city: "Delhi"
  }
];

const con = [{
    city: "London",
    continent: "Europe"
  },
  {
    city: "Delhi",
    continent: "Asia"
  },
  {
    city: "Seattle",
    continent: "North America"
  },
  {
    city: "Paris",
    continent: "Europe"
  },
  {
    city: "New York",
    continent: "North America"
  },
  {
    city: "Rome",
    continent: "Europe"
  },
  {
    city: "Bengaluru",
    continent: "Asia"
  },
  {
    city: "Los Angeles",
    continent: "North America"
  }
];

const cs = con.sort(sortContAsc);

console.log(checkContinent(per, cs));

Here, my desired result is: [{name:"Bruce", city:"Delhi"}, {name:"Mary", city:"London"}, {name:"Anita", city:"Paris"}, {name:"Thomas", city:"Rome"}, {name:"Edward", city:"New York"}, {name:"Robin", city:"Seattle"}, {name:"Sophia", city:"Los Angeles"}] — Abhisekh Nayak, Apr 01 '21 at 11:49
Possible duplicate of https://stackoverflow.com/a/64048690/6733771 — PiggyPlex, Apr 01 '21 at 11:56
Possible duplicate of https://softwareengineering.stackexchange.com/a/304299 — PiggyPlex, Apr 01 '21 at 11:58

score 0 · Accepted Answer · answered Apr 01 '21 at 11:32

You could take an object for the continents and sort by getting the continens of the cities.

const
    per = [{ name: "Mary", city: "London" }, { name: "Anita", city: "Paris" }, { name: "Edward", city: "New York" }, { name: "Thomas", city: "Rome" }, { name: "Robin", city: "Seattle" }, { name: "Sophia", city: "Los Angeles" }, { name: "Bruce", city: "Delhi" }],
    con = [{ city: "London", continent: "Europe" }, { city: "Delhi", continent: "Asia" }, { city: "Seattle", continent: "North America" }, { city: "Paris", continent: "Europe" }, { city: "New York", continent: "North America" }, { city: "Rome", continent: "Europe" }, { city: "Bengaluru", continent: "Asia" }, { city: "Los Angeles", continent: "North America" }],
    continents = Object.fromEntries(con.map(({ city, continent }) => [city, continent]));
    
per.sort((a, b) => continents[a.city].localeCompare(continents[b.city]));

console.log(per);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Thank you, but I need the code in which only find and sort functions are used. — Abhisekh Nayak, Apr 01 '21 at 11:34

PiggyPlex · Answer 2 · 2021-04-01T14:02:36.823

It's actually simpler than you might think. Here's a method that uses Array.prototype.sort() and String.prototype.localeCompare()

Mozilla Web Docs has great documentation for this; check it out at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#sorting_non-ascii_characters

const per = [
  {name:"Mary", city:"London"},
  {name:"Anita", city:"Paris" },
  {name:"Edward", city:"New York"},
  {name:"Thomas", city:"Rome"},
  {name:"Robin", city:"Seattle"},
  {name:"Sophia", city:"Los Angeles"},
  {name:"Bruce", city:"Delhi"}
],
con = [
  {city:"London", continent:"Europe"},
  {city:"Delhi", continent:"Asia"},
  {city:"Seattle", continent:"North America"},
  {city:"Paris", continent:"Europe"},
  {city:"New York", continent:"North America"},
  {city:"Rome", continent:"Europe"},
  {city:"Bengaluru", continent:"Asia"},
  {city:"Los Angeles", continent:"North America"}
],
findContinent = (cityToFind) => con.find(({ city }) => city === cityToFind).continent, // This line finds the city from "con". I've extracted the function here instead of using .find() inline to prevent repitition. This also means that you can add in some null checks here if you really want.
sortCountriesByContinent = () => per.sort((a, b) => {
  return findContinent(a.city).localeCompare(findContinent(b.city)); // Sorts "per" by using the .localeCompare() method and using the findContinent() function we made earlier.
});

console.log(sortCountriesByContinent());

Instead, we could also merge the properties from "con" into "per" so it's even easier. We could use a for/forEach loop, but the spread syntax is even easier:

const per = [
  {name:"Mary", city:"London"},
  {name:"Anita", city:"Paris" },
  {name:"Edward", city:"New York"},
  {name:"Thomas", city:"Rome"},
  {name:"Robin", city:"Seattle"},
  {name:"Sophia", city:"Los Angeles"},
  {name:"Bruce", city:"Delhi"}
],
con = [
  {city:"London", continent:"Europe"},
  {city:"Delhi", continent:"Asia"},
  {city:"Seattle", continent:"North America"},
  {city:"Paris", continent:"Europe"},
  {city:"New York", continent:"North America"},
  {city:"Rome", continent:"Europe"},
  {city:"Bengaluru", continent:"Asia"},
  {city:"Los Angeles", continent:"North America"}
],
sortCountriesByContinent = () => per.map((data) => {
    // Return a new object, with the name, city, and continent properties.
    return {
      ...con.find(({ city }) => city === data.city), // Find city from "con", and join its properties with this new object (city, continent). The duplicates shouldn't cause an issue (at least not for me).
      ...data // Join the original properties (name, city) with the new object
    };
})
.sort((a, b) => a.continent.localeCompare(b.continent)) // Once again, we sort using .localeCompare(), but this time we can directly use the .continent property
.map((data) => delete data.continent && data); // Optional, but removes continent property from data. This always returns true (tmk), so we can use an "and" operator to return data.

console.log(sortCountriesByContinent());

See How can I merge properties of two JavaScript objects dynamically? about creating a union of two objects.

How to sort the array of objects on the basis of an element in another array of objects?

2 Answers2