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.

it looks like your trying to sort the keys in an object, not an array of objects, (objects cannot be sorted, use an array or a `Map` instead) — Nick Parsons, Feb 21 '19 at 12:47
itemsArray is an object not an array, and objects can not be sorted. — Ganesh Karewad, Feb 21 '19 at 13:06
@GaneshKarewad "can not" does not exist, especially in programming. You can still sort an object in this case by it's keys. — nbokmans, Feb 21 '19 at 13:33
@nbokmans How to sort by key? Should i get result according what i want? — Ajay Gupta, Feb 21 '19 at 13:37
@nbokmans a "can not" certainly exists. If somebody tells you they want a sorted object, that's exactly what you tell them. Because objects keys are not sorted according to specs. If you slice and dice the object, then order the chunks you are demonstrating that impossibility by implementing a *different* requirement than the one you were given. — VLAZ, Feb 21 '19 at 14:01
Yes @VLAZ, let's argue semantics. We all know what OP wanted here, and whether or not his data structure allows for that (out of the box) is irrelevant. Congratulations, you are part of the problem of why SO is considered to be so unwelcoming. — nbokmans, Feb 21 '19 at 14:12
@nbokmans I don't see you answering the question. And understanding a requirement is the first step to solving it. A wrong requirement cannot be solved but it can be changed. What it's changed to is another matter - perhaps the change here is to drop that requirement as nonsensical. or change the source data. Or *transform* the source data into a new representation in JS that allows sorting. Or you don't transform, you walk the data, generate the visual representation and sort the HTML. These are DRASTICALLY different approaches to take. — VLAZ, Feb 21 '19 at 14:43
I would have to agree with @VLAZ. While we know that the OP wants the `itemsArray` sorted by sort order, the object itself states that it should instead be an array and not an object. Either we get a guaranteed sort order here or we get constant time lookup by item id. — Jordan Stubblefield, Feb 21 '19 at 15:49

Jordan Stubblefield · Answer 1 · 2019-02-21T15:21:46.390

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.

score 0 · Answer 2 · answered Feb 21 '19 at 13:47

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)

I think it's not working. It's return same data and with same sequence. — Ajay Gupta, Feb 21 '19 at 14:48
look agen it return objects `"sortOrder": 0, 1, 3` so the sort is working :) — Alen.Toma, Feb 21 '19 at 15:05
No, see i'll show you what's wrong. Check out jsfiddle link - https://jsfiddle.net/aj_gupta/y0z2u896/1/ — Ajay Gupta, Feb 21 '19 at 15:12
Its working just the fiddler showing a wrong data, try this `console.log('after Sort : ' + JSON.stringify(data));` and you will see that its sorted — Alen.Toma, Feb 21 '19 at 15:35
See mine after sort array. Will required something like this after sorting done. BTW thanks for your answer and your effort. — Ajay Gupta, Apr 15 '19 at 15:40

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

2 Answers2

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.

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.