Sort an array within an object, entering all hierarchies of it

Asked

Viewed 58 times

1

I own an object that contains several arrays within it. And these arrays contain other objects that contain a field lpec_sequence that I would like that under every hierarchy, it was ordered by that field. And I would also like to scroll through each existing sub_menu within the objects and sort them too.

{
  "layout": {
    "menu_events": [
      {
    "lpec_id": 90,
    "lpec_sequence": 1,
    "sub_menu": false
      },
      {
    "lpec_id": 125,
    "lpec_sequence": 2,
    "sub_menu": false
      },
      {
    "lpec_id": 124,
    "lpec_sequence": 3,
    "sub_menu": true,
    "sub_menu_items": [
      {
        "lpec_id": 96,
        "lpec_sequence": 5,
        "sub_menu": false
      },
      {
        "lpec_id": 97,
        "lpec_sequence": 6,
        "sub_menu": false
      },
      {
        "lpec_id": 98,
        "lpec_sequence": 7,
        "sub_menu": false
      },
      {
        "lpec_id": 99,
        "lpec_sequence": 8,
        "sub_menu": true,
        "sub_menu_items": [
          {
            "lpec_id": 100,
            "lpec_sequence": 1,
            "sub_menu": false
          },
          {
            "lpec_id": 101,
            "lpec_sequence": 2,
            "sub_menu": false
          },
          {
            "lpec_id": 102,
            "lpec_sequence": 3,
            "sub_menu": false
          },
          {
            "lpec_id": 103,
            "lpec_sequence": 4,
            "sub_menu": false
          },
          {
            "lpec_id": 104,
            "lpec_sequence": 5,
            "sub_menu": false
          },
          {
            "lpec_id": 105,
            "lpec_sequence": 6,
            "sub_menu": false
          },
          {
            "lpec_id": 106,
            "lpec_sequence": 7,
            "sub_menu": false
          }
        ]
      },
      {
        "lpec_id": 118,
        "lpec_sequence": 10,
        "sub_menu": true,
        "sub_menu_items": [
          {
            "lpec_id": 121,
            "lpec_sequence": 3,
            "sub_menu": false
          },
          {
            "lpec_id": 122,
            "lpec_sequence": 4,
            "sub_menu": false
          },
          {
            "lpec_id": 119,
            "lpec_sequence": 1,
            "sub_menu": false
          },
          {
            "lpec_id": 120,
            "lpec_sequence": 2,
            "sub_menu": false
          }
        ]
      },
      {
        "lpec_id": 92,
        "lpec_sequence": 1,
        "sub_menu": false
      },
      {
        "lpec_id": 93,
        "lpec_sequence": 2,
        "sub_menu": false
      },
      {
        "lpec_id": 94,
        "lpec_sequence": 3,
        "sub_menu": false
      },
      {
        "lpec_id": 95,
        "lpec_sequence": 4,
        "sub_menu": false
      },
      {
        "lpec_id": 107,
        "lpec_sequence": 9,
        "sub_menu": true,
        "sub_menu_items": [
          {
            "lpec_id": 109,
            "lpec_sequence": 2,
            "sub_menu": false
          },
          {
            "lpec_id": 110,
            "lpec_sequence": 3,
            "sub_menu": false
          },
          {
            "lpec_id": 111,
            "lpec_sequence": 4,
            "sub_menu": false
          },
          {
            "lpec_id": 112,
            "lpec_sequence": 5,
            "sub_menu": false
          },
          {
            "lpec_id": 114,
            "lpec_sequence": 7,
            "sub_menu": false
          },
          {
            "lpec_id": 113,
            "lpec_sequence": 6,
            "sub_menu": false
          },
          {
            "lpec_id": 115,
            "lpec_sequence": 8,
            "sub_menu": false
          },
          {
            "lpec_id": 116,
            "lpec_sequence": 9,
            "sub_menu": false
          },
          {
            "lpec_id": 117,
            "lpec_sequence": 10,
            "sub_menu": false
          },
          {
            "lpec_id": 108,
            "lpec_sequence": 1,
            "sub_menu": false
          }
        ]
      }
    ]
      },
      {
    "lpec_id": 123,
    "lpec_sequence": 2,
    "sub_menu": true,
    "sub_menu_items": [
      {
        "lpec_id": 91,
        "lpec_sequence": 1,
        "sub_menu": false
      }
    ]
      }
    ]
  }
}

1 answer

2


Since the .sort() changes the array directly you can do so:

// ordenar primeiro os sub menus
data.layout.menu_events.forEach(
  event => event.sub_menu_items && event.sub_menu_items.sort((a, b) => a.lpec_id - b.lpec_id)
);

// ordenar os menus com os sub menus já ordenados
data.layout.menu_events.sort(
  (a, b) => a.lpec_sequence - b.lpec_sequence
);

Example:

var data = {
  "layout": {
    "menu_events": [{
        "lpec_id": 90,
        "lpec_sequence": 1,
        "sub_menu": false
      },
      {
        "lpec_id": 125,
        "lpec_sequence": 2,
        "sub_menu": false
      },
      {
        "lpec_id": 124,
        "lpec_sequence": 3,
        "sub_menu": true,
        "sub_menu_items": [{
            "lpec_id": 96,
            "lpec_sequence": 5,
            "sub_menu": false
          },
          {
            "lpec_id": 97,
            "lpec_sequence": 6,
            "sub_menu": false
          },
          {
            "lpec_id": 98,
            "lpec_sequence": 7,
            "sub_menu": false
          },
          {
            "lpec_id": 99,
            "lpec_sequence": 8,
            "sub_menu": true,
            "sub_menu_items": [{
                "lpec_id": 100,
                "lpec_sequence": 1,
                "sub_menu": false
              },
              {
                "lpec_id": 101,
                "lpec_sequence": 2,
                "sub_menu": false
              },
              {
                "lpec_id": 102,
                "lpec_sequence": 3,
                "sub_menu": false
              },
              {
                "lpec_id": 103,
                "lpec_sequence": 4,
                "sub_menu": false
              },
              {
                "lpec_id": 104,
                "lpec_sequence": 5,
                "sub_menu": false
              },
              {
                "lpec_id": 105,
                "lpec_sequence": 6,
                "sub_menu": false
              },
              {
                "lpec_id": 106,
                "lpec_sequence": 7,
                "sub_menu": false
              }
            ]
          },
          {
            "lpec_id": 118,
            "lpec_sequence": 10,
            "sub_menu": true,
            "sub_menu_items": [{
                "lpec_id": 121,
                "lpec_sequence": 3,
                "sub_menu": false
              },
              {
                "lpec_id": 122,
                "lpec_sequence": 4,
                "sub_menu": false
              },
              {
                "lpec_id": 119,
                "lpec_sequence": 1,
                "sub_menu": false
              },
              {
                "lpec_id": 120,
                "lpec_sequence": 2,
                "sub_menu": false
              }
            ]
          },
          {
            "lpec_id": 92,
            "lpec_sequence": 1,
            "sub_menu": false
          },
          {
            "lpec_id": 93,
            "lpec_sequence": 2,
            "sub_menu": false
          },
          {
            "lpec_id": 94,
            "lpec_sequence": 3,
            "sub_menu": false
          },
          {
            "lpec_id": 95,
            "lpec_sequence": 4,
            "sub_menu": false
          },
          {
            "lpec_id": 107,
            "lpec_sequence": 9,
            "sub_menu": true,
            "sub_menu_items": [{
                "lpec_id": 109,
                "lpec_sequence": 2,
                "sub_menu": false
              },
              {
                "lpec_id": 110,
                "lpec_sequence": 3,
                "sub_menu": false
              },
              {
                "lpec_id": 111,
                "lpec_sequence": 4,
                "sub_menu": false
              },
              {
                "lpec_id": 112,
                "lpec_sequence": 5,
                "sub_menu": false
              },
              {
                "lpec_id": 114,
                "lpec_sequence": 7,
                "sub_menu": false
              },
              {
                "lpec_id": 113,
                "lpec_sequence": 6,
                "sub_menu": false
              },
              {
                "lpec_id": 115,
                "lpec_sequence": 8,
                "sub_menu": false
              },
              {
                "lpec_id": 116,
                "lpec_sequence": 9,
                "sub_menu": false
              },
              {
                "lpec_id": 117,
                "lpec_sequence": 10,
                "sub_menu": false
              },
              {
                "lpec_id": 108,
                "lpec_sequence": 1,
                "sub_menu": false
              }
            ]
          }
        ]
      },
      {
        "lpec_id": 123,
        "lpec_sequence": 2,
        "sub_menu": true,
        "sub_menu_items": [{
          "lpec_id": 91,
          "lpec_sequence": 1,
          "sub_menu": false
        }]
      }
    ]
  }
}

function sortEfter(obj, key, subKey) {
  if (!obj[subKey]) return;
  obj[subKey] = obj[subKey].sort((a, b) => a[key] - b[key]);
  obj[subKey].forEach(el => sortEfter(el, key, subKey))
}

data.layout.menu_events.forEach(
  event => sortEfter(event, 'lpec_id', 'sub_menu_items')
);

data.layout.menu_events.sort(
  (a, b) => a.lpec_sequence - b.lpec_sequence
);

console.log(data.layout.menu_events);

  • Hello, thanks for the reply. But I checked that the object with the id lpec_id: 107 and the lpec_id: 118 is not ordered. I wonder what happens ?

  • @Jonathan I just noticed that there are 3 levels of depth, some sub_menu_items have other sub_menu_items in. That’s just the way or not?

  • Yes yes, in this case there are 3 levels, but there can be 2 or even more than 3

  • @Jonathan ok, and the sublevels are always called sub_menu_items or there are other names?

  • Always the same.

  • @Jonathan take a look now.

  • Perfect. Thank you very much

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.