How to sort array of object in javascript by its property value?

Question

Have an object array like:

I want to sort itemsArray by its sortOrder.

Here is the sortOrder of item ( itemsArray['item=a37d2733-f710-4e47-8573-6aab11f6d020'].sortOrder )

{
"Items": [
  {
    "sectionId": "section=38",
    "itemsArray": {
      "item=a37d2733-f710-4e47-8573-6aab11f6d020": {
        "itemObject": {
          "description": "Really good food.",
          "price": 1000,
          "name": "Cappuccino",
          "SKey": "item=a37d2733-f710-4e47-8573-6aab11f6d020",
        },
        "sortOrder": 3
      },
      "item=bd844a27-0a00-445d-a40a-785cf16fwine": {
        "itemObject": {
          "description": "Really good wine.",
          "price": 3000,
          "name": "Red Wine",
          "SKey": "item=bd844a27-0a00-445d-a40a-785cf16fwine",
        },
        "sortOrder": 1
      },
      "item=a37d2733-f710-4e47-8573-6aab11f6d016": {
        "itemObject": {
          "description": "Really good drink.",
          "price": 1000,
          "name": "Orange Juice",
          "SKey": "item=a37d2733-f710-4e47-8573-6aab11f6d016",
        },
        "sortOrder": 2
      },
      "item=bd844a27-0a00-445d-a40a-785cf16f4950": {
        "itemObject": {
          "description": "Really good drink.",
          "price": 1000,
          "name": "Coca-Cola - sanjy",
          "SKey": "item=bd844a27-0a00-445d-a40a-785cf16f4950",
        },
        "sortOrder": 0
      }
    },
    "description": "Non-alcoholic beverages.",
    "sectionName": "Beverages",
  }
 ]
}

After sort array will be like this:

{
 "Items": [
  {
  "sectionId": "section=38",
  "itemsArray": {
    "item=bd844a27-0a00-445d-a40a-785cf16f4950": {
      "itemObject": {
        "description": "Really good drink.",
        "price": 1000,
        "name": "Coca-Cola - sanjy",
        "SKey": "item=bd844a27-0a00-445d-a40a-785cf16f4950",
      },
      "sortOrder": 0
    },
    "item=bd844a27-0a00-445d-a40a-785cf16fwine": {
      "itemObject": {
        "description": "Really good wine.",
        "price": 3000,
        "name": "Red Wine",
        "SKey": "item=bd844a27-0a00-445d-a40a-785cf16fwine",
      },
      "sortOrder": 1
    },
    "item=a37d2733-f710-4e47-8573-6aab11f6d016": {
      "itemObject": {
        "description": "Really good drink.",
        "price": 1000,
        "name": "Orange Juice",
        "SKey": "item=a37d2733-f710-4e47-8573-6aab11f6d016",
      },
      "sortOrder": 2
    },
    "item=a37d2733-f710-4e47-8573-6aab11f6d020": {
      "itemObject": {
        "description": "Really good food.",
        "price": 1000,
        "name": "Cappuccino",
        "SKey": "item=a37d2733-f710-4e47-8573-6aab11f6d020",
      },
      "sortOrder": 3
    }
  },
  "description": "Non-alcoholic beverages.",
  "sectionName": "Beverages",

}
]
}

I am already trying here using array.sort method but got no success. So, if anyone has a solution then it is helpful.

Answer 1

I would consider refactoring the JSON to be sortable, such as this:

{
  "Items": [
    {
      "sectionId": "section=38",
      "sectionName": "Beverages",
      "description": "Non-alcoholic beverages.",
      "itemsArray": [
        {
          "id": "item=a37d2733-f710-4e47-8573-6aab11f6d020",
          "description": "Really good food.",
          "price": 1000,
          "name": "Cappuccino",
          "sortOrder": 3
        },
        {
          "id": "item=bd844a27-0a00-445d-a40a-785cf16fwine",
          "description": "Really good wine.",
          "price": 3000,
          "name": "Red Wine",
          "sortOrder": 1
        },
        {
          "id": "item=a37d2733-f710-4e47-8573-6aab11f6d016",
          "description": "Really good drink.",
          "price": 1000,
          "name": "Orange Juice",
          "sortOrder": 2
        },
        {
          "id": "item=bd844a27-0a00-445d-a40a-785cf16f4950",
          "description": "Really good drink.",
          "price": 1000,
          "name": "Coca-Cola - sanjy",
          "sortOrder": 0
        }
      ]
    }
  ]
}

This can be sorted ascending using sort: Items[0].itemsArray.sort((a, b) => a.sortOrder - b.sortOrder) .

Changes include making the itemsArray an array and moving the item id into its own property in each item of the itemsArray.

---

I don't recommend sorting by object because sort order of object keys has been historically unguaranteed. But the following function may sort the json object as you currently have it structured, adapted from this Stack Overflow answer :

function sortObject(o) {
    var sorted = {},
    key, a = [];

    for (key in o) {
        if (o.hasOwnProperty(key)) {
            a[o[key].sortOrder] = key;
        }
    }

    for (key = 0; key < a.length; key++) {
        sorted[a[key]] = o[a[key]];
    }
    return sorted;
}

json.Items[0].itemsArray = sortObject(json.Items[0].itemsArray);

---

Note that this assumes your json object has a sortOrder property from 0...n because it fills an array by adding to array[sortOrder] instead of array.push and then iterates that array to fill the result object.

Answer 2

Here is a try, have a look and read the comment

 var data = { "Items": [ { "sectionId": "section=38", "itemsArray": { "item=a37d2733-f710-4e47-8573-6aab11f6d020": { "itemObject": { "description": "Really good food.", "price": 1000, "name": "Cappuccino", }, "sortOrder": 3 }, "item=bd844a27-0a00-445d-a40a-785cf16fwine": { "itemObject": { "description": "Really good wine.", "price": 3000, "name": "Red Wine", }, "sortOrder": 1 }, "item=a37d2733-f710-4e47-8573-6aab11f6d016": { "itemObject": { "description": "Really good drink.", "price": 1000, "name": "Orange Juice", }, "sortOrder": 2 }, "item=bd844a27-0a00-445d-a40a-785cf16f4950": { "itemObject": { "description": "Really good drink.", "price": 1000, "name": "Coca-Cola - sanjy", }, "sortOrder": 0 } }, "description": "Non-alcoholic beverages.", "sectionName": "Beverages", } ] } data.Items.forEach((item)=> { var array = item.itemsArray; // sort the array. var keys= Object.keys(array).sort((a, b)=> { return array[a].sortOrder - array[b].sortOrder }); // and now create the new itemsArray var _itemsArray= {}; keys.forEach((key)=> _itemsArray[key] =array[key]) // last assign the itemsArray item.itemsArray = _itemsArray; }); console.log(data.Items)