Convert array of objects to single objects while keeping keys in same order

Question

I am trying to convert Objects in an Array to one single Object in javascript. Here are objects in an array and logic to convert it to one single object.

var arrObj=[{"Plain bold italic text": "2"},{29: "1"},{24: "2"},{21: "2"},{26: "2"},{27: "2"}];
     var obj={};
     arrObj.forEach((element, index) => {
          obj[Object.keys(element)[0]] = parseInt(Object.values(element).toString());
      });
      console.log(obj);

Somehow it is my requirement to keep string as well as numbers as keys, but I want to maintain the same order for keys. My logic sorts keys which I don't desire.
Expected output:
{"Plain bold italic text": 2, "29": 1,"24": 2,"21": 2,"26": 2,"27": 2}

Answer 1

No, It is not possible to maintain same order with Object You can maintain order only with Array by shifting value with sort and other functions but you can not same with Object.

Answer 2

You can Hack the object key order with Map()

var myObject = new Map();
var arrObj=[{"Plain bold italic text": "2"},{29: "1"},{24: "2"},{21: "2"},{26: "2"},{27: "2"}];
var result = arrObj.reduce(function(accumulator, object){
     
      for(var key in object){
       myObject.set(key, object[key]);
       return myObject
     }
},{})

for (var [key, value] of result) {
  console.log(key + ' = ' + value);
}

READ MORE: http://www.jstips.co/en/javascript/map-to-the-rescue-adding-order-to-object-properties/

Answer 3

This isn't doing exactly what you want, but it's the only way I know of to keep everything in the same order - by prepending an underscore, it causes all of the keys to behave like strings and stay in the right order. I can't imagine what your use case is, but this would potentially give you a workaround.

var arrObj=[{"Plain bold italic text": "2"},{29: "1"},{24: "2"},{21: "2"},{26: "2"},{27: "2"}];
     var obj={};
     arrObj.forEach((element, index) => {
          obj["_" + Object.keys(element)[0]] = parseInt(Object.values(element).toString());
      });
      console.log(obj);

Answer 4

the problem that you have is that the properties order in objects is not guaranteed in JavaScript; you need to use an Array in order to preserve it (as you have in your objArray.

Definition of an Object from ECMAScript:

Object

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

another solution would be a map instead of a plain object as this article says: enter link description here

here you have a working example with map:

var arrObj = [{
  "Plain bold italic text": "2"
}, {
  29: "1"
}, {
  24: "2"
}, {
  21: "2"
}, {
  26: "2"
}, {
  27: "2"
}];
var obj = new Map();

arrObj.forEach((element, index) => {
  obj.set(Object.keys(element)[0], parseInt(Object.values(element).toString()));
});
for (var [key, value] of obj) {
  console.log(key, value);
}