Sorting objects in nested array returns undefined

Question

I'm trying to order the objects in the "exhibitors" array by their title if their display_order is null. But when I try doing this, I get the error: TypeError: Cannot assign to read only property '0' of object '[object Array]'. Is it because the array im trying to sort is too deep?

  let sortedTiers = [...exhibitorTiers]
    .sort((a, b) => {
      return a.order - b.order;
    })
    .map((tier) => {
      tier.exhibitors.sort((a, b) => a.title.localeCompare(b.title));
      return tier;
    });



The data structure is below

[
    {
        "exhibitor_tier_id": 269,
        "tier_name": ";ll",
        "order": 1,
        "color": null,
        "type": "expo",
        "exhibitors": [
            {
                "exhibitor_id": 6218,
                "title": "Audax Group",
                "event_stream_id": null,
                "display_order": 1,
            },
            {
                "exhibitor_id": 6220,
                "title": "Apex Group",
                "display_order": 5,

            }
        ]
    },
    {
        "exhibitor_tier_id": 237,
        "tier_name": ";lkj;klj",
        "order": 2,
        "color": null,
        "type": "expo",
        "exhibitors": [
            {
                "exhibitor_id": 6224,
                "title": "EnCap Investments",
                "display_order": null,

            },
            {
                "exhibitor_id": 6226,
                "title": "Preqin",
                "display_order": null,

            },
            {
                "exhibitor_id": 6229,
                "title": "HKVCA",
                "display_order": null,

            },
            {
                "exhibitor_id": 6232,
                "title": "SVCA",
                "display_order": null,
            }
        ]
    }
]```

Answer 1

Here we go. Remove slice and do compare display_orders if they exist

const tiers = [{
    "exhibitor_tier_id": 269,
    "tier_name": ";ll",
    "order": 1,
    "color": null,
    "type": "expo",
    "exhibitors": [{
        "exhibitor_id": 6218,
        "title": "Audax Group",
        "event_stream_id": null,
        "display_order": 1,
      },
      {
        "exhibitor_id": 6220,
        "title": "Apex Group",
        "display_order": 5,

      }
    ]
  },
  {
    "exhibitor_tier_id": 237,
    "tier_name": ";lkj;klj",
    "order": 2,
    "color": null,
    "type": "expo",
    "exhibitors": [{
        "exhibitor_id": 6224,
        "title": "EnCap Investments",
        "display_order": null,

      },
      {
        "exhibitor_id": 6226,
        "title": "Preqin",
        "display_order": null,

      },
      {
        "exhibitor_id": 6229,
        "title": "HKVCA",
        "display_order": null,

      },
      {
        "exhibitor_id": 6232,
        "title": "SVCA",
        "display_order": null,
      }
    ]
  }
];

tiers
  .sort((a, b) => a.order - b.order)
  .forEach(
    tier => tier.exhibitors.sort(
      (a, b) => (~~a.display_order - ~~b.display_order) || a.title.localeCompare(b.title)
    )
  );

console.log(tiers);

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