Adding something to the top of a JSON object

Question

I have a JSON object which is initiated when the page is loaded, like this:

data[foo] = bar;
data[foo2] = bar2;
data[foo3] = bar3;

Is there a way to inject an element before the first foo element, so that when doing a for var i in data, the new element will be looped through before the elements that were added when the object was initiated?

The reason is, I'm displaying some items to the user. When the user adds a new item via javascript, I want this new item to be displayed above all the existing items, however when I add the new item, i.e

data[newItem] = newItem;

Then the JSON object looks like this:

data[foo] = bar;
data[foo2] = bar2;
data[foo3] = bar3;
data[newItem] = newItem;

Instead of how I want, which is:

data[newItem] = newItem;
data[foo] = bar;
data[foo2] = bar2;
data[foo3] = bar3;

Any ideas?

• J. Holmes: this topic is probably relevant. Namely the part that says: If order is relevant, use an array.

Answer 1

In JS, object properties' order is not guaranteed. Therefore, even if they are ordered in the JSON string, when parsed as a JS object, you will never predict in what order they come up.

Better use arrays instead. You could use the unshift() method to put the item in the first index.

var data = [bar,bar2,bar3];
data.unshift(newItem);
//data = [newItem,bar,bar2,bar3];

• georgebrock: See also stackoverflow.com/questions/648139/… and stackoverflow.com/questions/586182/…
• Ali: Not an option, I've already coded it as an object. I'll have to change it in a gazillion places to use an array. What's a way to make it work as an object?
• wong2: so there's no way to use data["foo"] to get the corresponding data..I'm wondering if there's libraries simulate Python's OrderedDict in JavaScript
• Ali: Besides, with an array, I'd have the same issue. Say an array is initalized with 5 elements, then the user adds a new one and I want to move it to the start of the array. How would I do that?
• user405398: @Click Upvote You can use array like object. var arr = []; arr.foo = 'bar'; the only thing is you will not be able to access that foo inside a for(var i = 0; i < arr.length; i++){...}. So, your existing code can be same. You can still access them inside for(var key in data){...} loop, even if you change your data = [].

Answer 2

As a compliment to Joseph the Dreamer's answer, I have ran some quick checks in firefox & chrome.

Firefox:

var obj = {};
obj.a = 'a';
obj.c = 'c';
obj.b = 'b';
obj['0'] = '0';
for(var i in obj){
 console.log(i);
}
//prints:
a
c
b
0

Chrome:

var obj = {};
obj.a = 'a';
obj.c = 'c';
obj.b = 'b';
obj['0'] = '0';
for(var i in obj){
 console.log(i);
}
//prints:
0
a
c
b

Answer 3

I've stumbled upon this and achieved it using:

const newObject = Object.assign({first: value}, oldObject)

As mentioned, order is not guaranteed but for me this is good enough. :)

Answer 4

Is there a way to inject an element before the first foo element?

Which comes first in the array:

window.object or window.alert?

Neither, objects don't have an order. If you want an array use an array. Objects are not arrays.

If you want

var ThingsInOrder = [
 FirstThing,
 SecondThing,
 ThirdThing
];
ThingsInOrder.push(ForthThing);

Use an array.

If you want:

var ThingsNeverInOrder = {
 Window,
 Alert,
 Derp,
 Herp
};
ThingsNeverInOrder.foo = bar;

Use an object.

Answer 5

Instead of adding new value in the same object, you can create a new object and arrange properties order as you want. example :

var objj1 = {name:'viru',lastname:'nehra'};

So create a new object with new property which you want on top:

var obj2 = {age: 21}

and the run:

for(var key in objj1){
 obj2[key] = objj1[key]
}
obj2 = {age: 21, name: "viru", lastname: "nehra"}

Answer 6

I think you can convert it to string, append your data at the beginning of the string then re-convert the string to json using "eval"

• Incognito: Step away from the keyboard.
• Incognito: Please, go research why you shouldn't be using eval. Then figure out why you shouldn't be converting objects to strings and back again...
• Samir Adel: I would be happy to learn from you, why i shouldn't do that ?!
• Joseph: Read this article from MDN
• user405398: Instead of eval you could have used JSON.parse.