Changing the order of the Object keys....

Question

var addObjectResponse = [{
    'DateTimeTaken': '/Date(1301494335000-0400)/',
    'Weight': 100909.090909091,
    'Height': 182.88,
    'SPO2': '222.00000',
    'BloodPressureSystolic': 120,
    'BloodPressureDiastolic': 80,
    'BloodPressurePosition': 'Standing',
    'VitalSite': 'Popliteal',
    'Laterality': 'Right',
    'CuffSize': 'XL',
    'HeartRate': 111,
    'HeartRateRegularity': 'Regular',
    'Resprate': 111,    
    'Temperature': 36.6666666666667,
    'TemperatureMethod': 'Oral',    
    'HeadCircumference': '',    
}];

This is a sample object which i am getting from back end, now i want to change the order of the object. I don't want to sort by name or size... i just want to manually change the order...

you going to receive an error with that response, because 'HeadCircumference': '', shouldn't have the extra comma — Kevin Bowersox, Aug 05 '11 at 16:53
possible duplicate of [Elements order - for (... in ...) loop in javascript](http://stackoverflow.com/questions/280713/elements-order-for-in-loop-in-javascript) — KARASZI István, Aug 05 '11 at 16:59
Just write them out in the order you want. You can create an array of keys in the order you want and access the object using that array — mplungjan, Aug 05 '11 at 17:03

Jeff Vdovjak · Answer 1 · 2020-02-28T02:02:14.567

If you create a new object from the first object (as the current accepted answer suggests) you will always need to know all of the properties in your object (a maintenance nightmare).

Use `Object.assign()` instead.

*This works in modern browsers -- not in IE or Edge <12.

 let addObjectResponse = {
        'DateTimeTaken': '/Date(1301494335000-0400)/',
        'Weight': 100909.090909091,
        'Height': 182.88,
        'SPO2': '222.00000',
        'BloodPressureSystolic': 120,
        'BloodPressureDiastolic': 80,
        'BloodPressurePosition': 'Standing',
        'VitalSite': 'Popliteal',
        'Laterality': 'Right',
        'CuffSize': 'XL',
        'HeartRate': 111,
        'HeartRateRegularity': 'Regular',
        'Resprate': 111,    
        'Temperature': 36.6666666666667,
        'TemperatureMethod': 'Oral',    
        'HeadCircumference': '',    
    };

    // Create an object which will serve as the order template
    let objectOrder = {
        'HeartRate': null,
        'HeartRateRegularity': null,
    }

    addObjectResource = Object.assign(objectOrder, addObjectResource);

Now the two items you wanted ordered are in order, and the remaining properties are below them.

Now your object will look like this:

{           
            'HeartRate': 111,
            'HeartRateRegularity': 'Regular',
            'DateTimeTaken': '/Date(1301494335000-0400)/',
            'Weight': 100909.090909091,
            'Height': 182.88,
            'SPO2': '222.00000',
            'BloodPressureSystolic': 120,
            'BloodPressureDiastolic': 80,
            'BloodPressurePosition': 'Standing',
            'VitalSite': 'Popliteal',
            'Laterality': 'Right',
            'CuffSize': 'XL',
            'Resprate': 111,    
            'Temperature': 36.6666666666667,
            'TemperatureMethod': 'Oral',    
            'HeadCircumference': '',    
}

This works great for me, except, when a key is zero (the number zero). It will ALWAYS come first, no matter what. — hitchhiker, Mar 26 '22 at 13:51

Ben K. · Answer 2 · 2014-03-13T13:08:34.967

I wrote this small algorithm which allows to move keys, it's like jQuery .insertAfter() method. You have to provide:

//currentKey: the key you want to move
//afterKey: position to move-after the currentKey, null or '' if it must be in position [0]
//obj: object


function moveObjectElement(currentKey, afterKey, obj) {
    var result = {};
    var val = obj[currentKey];
    delete obj[currentKey];
    var next = -1;
    var i = 0;
    if(typeof afterKey == 'undefined' || afterKey == null) afterKey = '';
    $.each(obj, function(k, v) {
        if((afterKey == '' && i == 0) || next == 1) {
            result[currentKey] = val; 
            next = 0;
        }
        if(k == afterKey) { next = 1; }
        result[k] = v;
        ++i;
    });
    if(next == 1) {
        result[currentKey] = val; 
    }
    if(next !== -1) return result; else return obj;
}

Example:

var el = {a: 1, b: 3, c:8, d:2 }
el = moveObjectElement('d', '', el); // {d,a,b,c}
el = moveObjectElement('b', 'd', el); // {d,b,a,c}

I like people who make impossible things possible. – ar2015 Mar 07 '18 at 23:10 — ar2015, Mar 07 '18 at 23:10

jontsai · Answer 3 · 2011-08-05T17:18:15.230

12

You can't order JavaScript object key/value pairs. It's stored in its own internal format, so you should never rely on the order of that. In JS, everything is an Object, even an Array. So sometimes you can introduce bugs when using array notation and object notation together (for x in var)

edited Aug 05 '11 at 17:18

answered Aug 05 '11 at 16:57

jontsai

662
1
6
13

3

while this is true, this doesn't resemble real-world usage where templates are often rendered by looping over object properties. And when you loop over them, they have an order. Altering this order is... fragile, but IMO it should be added. – ProblemsOfSumit Dec 20 '16 at 15:52
3

I was also under same impression until I have seen this MDN page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map The first line says **The Map object holds key-value pairs and remembers the original insertion order of the keys** – polavishnu Apr 25 '19 at 16:50
2

This answer was correct at the time but is now outdated and incorrect: You can absolutly depend on the order of object keys starting with ECMAScript 6. It has become part of the JavaScript specification. See answer from @Tim Down or this link: https://2ality.com/2015/10/property-traversal-order-es6.html – EliteRaceElephant Aug 07 '21 at 09:52
It's possible to order the attributes of an object now a days. – Mateen Oct 18 '21 at 05:18

Tim Down · Answer 4 · 2020-11-16T16:21:26.750

2020 Update

The answer below was correct at time of writing in 2011. However, since ES6, enumeration order has been specified as part of the language. Here's a nice article summarising this: https://2ality.com/2015/10/property-traversal-order-es6.html

Original answer

Properties of an object in JavaScript do not have an order. There may appear to be an order in some browsers but the ECMAScript specification defines object property enumeration order as being implementation-specific so you should not assume one browser's behaviour will be the same as another's. Chrome, for example, does not use the same ordering as some other browsers: see this lengthy bug report for at least as much discussion of this issue as you could possibly want.

If you need a specific order, use an array, or two arrays (one for keys and one for values).

score 8 · Answer 5 · answered Dec 23 '19 at 02:40

I like the approved answer by Chamika Sandamal. Here's a simple function that uses their same logic with a little be of freedom to change the order as you need it.

function preferredOrder(obj, order) {
    var newObject = {};
    for(var i = 0; i < order.length; i++) {
        if(obj.hasOwnProperty(order[i])) {
            newObject[order[i]] = obj[order[i]];
        }
    }
    return newObject;
}

You give it an object, and an array of the key names you want, and returns a new object of those properties arranged in that order.

var data = {
    c: 50,
    a: 25,
    d: 10,
    b: 30
};

data = preferredOrder(data, [
    "a",
    "b",
    "c",
    "d"
]);

console.log(data);

/*
    data = {
        a: 25,
        b: 30,
        c: 50,
        d: 10
    }
*/

I'm copying and pasting from a big JSON object into a CMS and a little bit of re-organizing of the source JSON into the same order as the fields in the CMS has saved my sanity.

score 7 · Answer 6 · answered May 06 '15 at 14:03

7

You can use Object.keys():

var obj = {
    a: 1,
    b: 2,
    c: 4
};

var new_obj = {};

Object.keys(obj)
.sort(function(a, b) {
    /** Insert your custom sorting function here */
    return a - b;
})
.forEach(function(key) {
    new_obj[key] = obj[key];
});

obj = new_obj;

answered May 06 '15 at 14:03

vardump

658
1
10
17

I did something just like this and the order was not preserved. – dardub Jul 18 '19 at 14:12

score 4 · Accepted Answer · answered Aug 05 '11 at 17:03

4

if you want to manually reorder. simply create new object and assign values using old object.

var newObject= [{
    'DateTimeTaken': addObjectResponse.DateTimeTaken,
    'Weight': addObjectResponse.Weight,
    'Height': addObjectResponse.Height,
    'SPO2': addObjectResponse.SPO2 
}];

answered Aug 05 '11 at 17:03

Chamika Sandamal

22,932
5
63
83

24

That has no more order than the original object. Object properties do not have a consistent enumeration order in JavaScript. – Tim Down Aug 06 '11 at 15:29
5

There may be a use case where this is necessary, such as rendering an object with a templating library – amigolargo Jun 13 '16 at 11:09
4

Object properties *do* have a consistent order in javascript, which is the order in which they are added. see `Object.prototype.entries(someObject);` – Jay Day Zee Apr 23 '18 at 12:58
2

@JayDayZee [I did look it up](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries). “The order of the array returned by Object.entries() does not depend on how an object is defined.” – Tadhg McDonald-Jensen Feb 20 '19 at 23:56
There is an ordering, but that ordering is not necessarily the ordering used by `Object.entries`. The order is integer keys, in ascending order, then string keys, in the order they were added, then symbol keys, in the order they were added. (https://tc39.es/ecma262/#sec-ordinary-object-internal-methods-and-internal-slots-ownpropertykeys). – Paul Brannan Feb 21 '20 at 19:39
This is a maintenance nightmare! What if you are expecting a new property? You would have to edit your code. You should use Object.assign() with this technique. (See my answer below) – Jeff Vdovjak Feb 27 '20 at 22:25

score 2 · Answer 8 · answered Dec 07 '18 at 07:29

2

If you do not want to create a new object, you can use the following code snippet.

function orderKey(obj, keyOrder) {
    keyOrder.forEach((k) => {
        const v = obj[k]
        delete obj[k]
        obj[k] = v
    })
}

here is a codepen: https://codepen.io/zhangyanwei/pen/QJeRxB

answered Dec 07 '18 at 07:29

张焱伟

51
6

This is an elegant solution, *especially* because it won't lose key:value pairs if the data being sent changes. However, you still need to **know all of the keys**. Any keys not identified in keyOrder will be at the front of the object. – Jeff Vdovjak Feb 27 '20 at 21:09
using `Object.assign()` will allow unknown key:pairs to be placed at the bottom. – Jeff Vdovjak Feb 27 '20 at 23:37
1

Also, sadly, this won't work for numeric keys – Berci Apr 09 '21 at 18:53
This method is a little tricky. You should use a sorted array for keys rather than update the object. - that would be the safest approach. – 张焱伟 Apr 15 '21 at 07:30

score 1 · Answer 9 · answered Aug 05 '11 at 16:55

1

I think that's not possible in JavaScript.

You can create an array which will contain the field names in your order and you can iterate through this array and fetch the fields from the actual object.

answered Aug 05 '11 at 16:55

KARASZI István

29,989
8
97
120

1

@John: I don't understand your comment. – KARASZI István Aug 05 '11 at 16:57

score 0 · Answer 10 · answered Aug 05 '11 at 17:00

0

Just refer to the object keys in the order that you like:

aKeys = [
  addObjectResponse[0].DateTimeTaken,
  addObjectResponse[0].Weight,
  addObjectResponse[0].Height,
  ...etc...
]

answered Aug 05 '11 at 17:00

silverstrike

522
2
7

score -1 · Answer 11 · answered Sep 27 '18 at 18:07

-1

function orderKeys(obj, keys){
    const newObj = {};
    for(let key of keys){
        newObj[key] = obj[key];
    }
    return newObj;
}

answered Sep 27 '18 at 18:07

ricka

1,058
1
10
13

Changing the order of the Object keys....

11 Answers11

Use `Object.assign()` instead.

2020 Update

Original answer

Linked

Related

Changing the order of the Object keys....

11 Answers11

Use Object.assign() instead.

2020 Update

Original answer

Linked

Related

Use `Object.assign()` instead.