lodash sort an array of objects by a property which has an array of objects

Question

I have a an object. I am able to sort the items by using lodash's _.orderBy(). However, in one of the scenario I have to sort by subject, which is an array of objects. Items inside the subject array are already sorted based on the name.

As subject is an array of the objects, I need to consider the first item for sorting.

[
  {
    "id": "1",
    "name": "peter",
    "subject": [
      {
        "id": "1",
        "name": "maths"
      },
      {
        "id": "2",
        "name": "social"
      }
    ]
  },
  {
    "id": "2",
    "name": "david",
    "subject": [
      {
        "id": "2",
        "name": "physics"
      },
      {
        "id": "3",
        "name": "science"
      }
    ]
  },
  {
    "id": "3",
    "name": "Justin",
    "subject": [
    ]
  }
]

Answer 1

You can use _.get() to extract the name (or id) of the 1st item in subjects. If no item exists, _.get() will return undefined, which can be replaced with a default value. In this case, we don't want to use an empty string as a default value, since the order would change. Instead I'm checking if the value is a string, if it is I use lower case on it, if not I return it as is.

const arr = [{"id":"1","name":"peter","subject":[{"id":"1","name":"maths"},{"id":"2","name":"social"}]},{"id":"2","name":"david","subject":[{"id":"2","name":"physics"},{"id":"3","name":"science"}]},{"id":"3","name":"Justin","subject":[]}]

const result = _.orderBy(arr, o => {
  const name = _.get(o, 'subject[0].name')
  
  return _.isString(name) ? name.toLowerCase() : name
})

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>