Efficiently fill values in an array of objects in JavaScript

Question

I have an array of objects like :

a = [{"a":1,"b":2},{"a":3,"c":5}]

I would like to obtain, in an efficient way :

b = [{"a":1,"b":2,"c":"blabla"},{"a":3,"b":"blabla","c":5}]

My function so far is (using the underscoreJS library in the first line):

let fillFuncArr = (res,fill) => {
    // we fill the potential missing values
    let col_names = _.uniq(res.map(x => Object.keys(x)).reduce((acc, curr) => acc.concat(curr), []), false);
    for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < col_names.length; j++) {
            if (!res[i].hasOwnProperty(col_names[j])) {
                res[i][col_names[j]] = fill;
            }
        }
    }
    return res;
};

In my example above you would do :

b = fillFuncArr(a,"blabla")

How to make that function faster if at all possible ?

===========================================================================

EDIT after answers to benchmark replies :

I tested the functions like this :

for (let i=0;i<num_tries;i++) {
    let time_tmp = performance.now();
    console.time("old");
    fillFuncArr(obj,"blah");
    console.timeEnd("old");
    time_old.push(performance.now()-time_tmp);
    time_tmp = performance.now();
    console.time("new");
    fillFuncArrNew(obj,"blah");
    console.timeEnd("new");
    time_new.push(performance.now()-time_tmp);
}

This answer (the first calculation of the old function is always much faster than the subsequent ones, not quite sure why...) is 50-100 times faster. The fill time is the same, it's getting the keys that makes up all the speed gains :

 "old": [
        147.52006196975708,
        1065.4309248924255,
        1023.5124139785767,
        1021.830512046814,
        1855.5670911073685,
        1006.7114781141281,
        996.8541929721832,
        1306.3085260391235
    ],
    "new": [
        18.814231991767883,
        23.46549105644226,
        17.708116054534912,
        15.55942702293396,
        18.764864921569824,
        15.866382002830505,
        19.18179702758789,
        23.987511038780212
    ]

would appreciate comments for the negative votes

Chapo
– Chapo

2019-11-21 03:19:55 +00:00
Commented Nov 21, 2019 at 3:19 — Chapo
– Chapo, Commented Nov 21, 2019 at 3:19

georg · Accepted Answer · 2019-11-21 03:07:13Z

2

Don't know if this is faster, but definitely shorter:

dummy = {a: 'dummy', b: 'dummy', c: 'dummy'}

a = [{"a": 1, "b": 2}, {"a": 3, "c": 5}]

r = a.map(x => ({...dummy, ...x}))

console.log(r)

If you want the dummy to be fully dynamic, then

function fillKeys(a, value) {
    let keys = new Set(a.flatMap(Object.keys)),
        dummy = Object.fromEntries(
            [...keys].map(k => [k, value]));
    return a.map(x => ({...dummy, ...x}));
}

//

a = [{"a": 1, "b": 2}, {"a": 3, "c": 5}]

r = fillKeys(a, 'dummy')

console.log(r)

That being said, I'm sure this is actually an XY problem, so it would help to explain us what you're actually doing. For example, if you just want all objects in the list to respond to the same set of keys, that would be much easier (and also faster) with proxies.

edited Nov 21, 2019 at 3:07

answered Nov 21, 2019 at 2:59

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chapo Over a year ago

I am sending the resulting object as response to a web-query for a graph on a webpage so I do need all fields to be present in all objects of the array.

georg Over a year ago

@Chapo: ok, makes sense then. If you can profile the answers against your code, feel free to share the results, it would be helpful.

Chapo Over a year ago

added in the question since comments are limited.

CertainPerformance · Accepted Answer · 2019-11-21 03:01:41Z

1

First figure out all keys in the array items, create a "default" object filled with the fill as its values, then iterate over the items and spread the default object, then the original object:

const fillFuncArr = (arr, fill) => {
  const allKeys = new Set(arr.flatMap(Object.keys));
  const defaultObj = {};
  for (const key of allKeys) {
    defaultObj[key] = fill;
  }
  return arr.map(obj => ({ ...defaultObj, ...obj }));
};

a = [{"a":1,"b":2},{"a":3,"c":5}]
b = fillFuncArr(a,"blabla")
console.log(b);

answered Nov 21, 2019 at 3:01

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

StackSlave · Accepted Answer · 2019-11-21 03:15:52Z

0

Take a look here:

console.time('allTest');
var was = [{a:1, b:2}, {a:3, c:5}];
function blah(array){
  var a = [], o, b = 'blabla';
  array.forEach(function(w){
    o = {};
    o.a = 'a' in w ? w.a : b;
    o.b = 'b' in w ? w.b : b;
    o.c = 'c' in w ? w.c : b;
    a.push(o);
  });
  return a;
}
console.time('test'); console.log(blah(was)); console.timeEnd('test'); console.timeEnd('allTest');

At least this will show you how to test the time.

edited Nov 21, 2019 at 3:15

answered Nov 21, 2019 at 3:10

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Comments

Vincent · Accepted Answer · 2019-11-21 03:16:22Z

0

const a = [{"a":1,"b":2},{"a":3,"c":5}];
const allKeys=[...new Set(a.flatMap(Object.keys))]
const dummyObj=Object.fromEntries(allKeys.map(key => [key, 'blabla']));
console.log(a.map(data => ({...dummyObj, ...data})))

answered Nov 21, 2019 at 3:16

Vincent

5,0433 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Efficiently fill values in an array of objects in JavaScript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related