How to sort json array having groups of json objects

Question

I want to sort the below json array based on the name attribute. The challenge is if the "rows" contain two json array element then it should first short within the group and then sort based on the other json array.

Here is my attempt. It is sorting the array but not the (elements inside the group)

// sort the data
this.leadPoolRecords = JSON.parse(
  JSON.stringify(this.leadPoolRecords)
).sort((a, b) => {
  a = a[colName] ? a[colName].toLowerCase() : ""; // Handle null values
  b = b[colName] ? b[colName].toLowerCase() : "";
  return a > b ? 1 * isReverse : -1 * isReverse;
});

data =    [
      {
        "button": {
          "btn": true,
          "size": "20"
        },
        "rows": [
          {
            "name": "john",
            "role": "CEO",
            "phone": "xxxxxxxxx",
            "email": "bcd@email.com"
          }
        ]
      },
      {
        "button": {
          "btn": true,
          "size": "20"
        },
        "rows": [
          {
            "name": "Mike",
            "role": "Director",
            "phone": "xxxxxxxxx",
            "email": "cde@email.com"
          }
        ]
      },
      {
        "button": {
          "btn": true,
          "size": "20"
        },
        "rows": [
          {
            "name": "rahul",
            "role": "CTO",
            "phone": "xxxxxxxxx",
            "email": "xyz@email.com"
          },
          {
            "name": "ajay",
            "role": "Researcher",
            "phone": "xxxxxxxxx",
            "email": "abc@email.com"
          }
        ]
      }
    ]

Answer 1

First, you can sort the rows arrays this way:

data.forEach(item => item.rows.sort((row1, row2) => row1.name.localeCompare(row2.name)));

Then you can sort the elements of data based on the rows arrays. For example, if you want to sort them based on the name of the first row:

data.sort((item1, item2) => item1.rows[0].name.localeCompare(item2.rows[0].name));