We Keep Coding

Find properties that are null for every JavaScript object in an array

For example, if I have a JavaScript array of objects such as:
var jsObjects = [
{a: 1, b: 2, c: null, d: 3, e: null},
{a: 3, b: null, c: null, d: 5, e: null},
{a: null, b: 6, c: null, d: 3, e: null},
{a: null, b: 8, c: null, d: 1, e: null}
];
I would expect the output to be ["c", "e"].
My current solution is to call a function for each column & loop through the jsObjects:
function isAllNull(col) {
var allNulls = true;
for (var i = 0; i < data.length; i++) {
if (jsObjects[i].col != null) {
allNulls = false;
break;
}
}
}
But I would like for this function to be more generic such that it will jsObjects with any number of arbitrary simple (i.e. not objects) properties. The objects in the array all have the same properties.

If you guarantee that each object in the array has the same properties then:
take the keys from the first object in the array
reduce the keys and test every key in the original array for null
if every key returns true then include the key in the output
Example:
var jsObjects = [
{a: 1, b: 2, c: null, d: 3, e: null},
{a: 3, b: null, c: null, d: 5, e: null},
{a: null, b: 6, c: null, d: 3, e: null},
{a: null, b: 8, c: null, d: 1, e: null}
];
function nullCols(arr) {
var keys = Object.keys(arr[0]);
var nulls = keys.reduce((output, key) => {
if (arr.every(item => item[key] === null)) {
output.push(key);
}
return output;
}, []);
return nulls;
}
console.log(nullCols(jsObjects));

Finding all the keys in the array of objects

Given that I have an array that is return from database that contains object,
var jsObjects = [
{a: 1, b: 2},
{a: 3, b: 4, c: 66},
{a: 5, b: 6, c: 55, d: 66},
{a: 7, b: 8, c: 12, e: 15}
];
How can I get all the keys of the object? I've been using this to obtain the keys, however I notice that index 0 wont always have all the keys. Hence problem lays.
let columns = Object.keys(jsObjects[0]),
However, the first index won't always have all the columns.
My desired output:
["a", "b", "c", "d", "e"]

Sets are good at removing duplicates:
const jsObjects = [
{a: 1, b: 2},
{a: 3, b: 4, c: 66},
{a: 5, b: 6, c: 55, d: 66},
{a: 7, b: 8, c: 12, e: 15}
];
const keys = [...new Set(jsObjects.flatMap(Object.keys))];
console.log(keys);

You could create an object with the count of the keys and get the keys from counts.
const
objects = [{ a: 1, b: 2 }, { a: 3, b: 4, c: 66 }, { a: 5, b: 6, c: 55, d: 66 }, { a: 7, b: 8, c: 12, e: 15 }],
result = Object.keys(objects.reduce((r, o) => {
Object.keys(o).forEach(k => r[k] = true);
return r;
}));
console.log(result);

You can use a Set(), which is like an array with the exception that it doesn't allow multiple occurances of elements.
var jsObjects = [
{a: 1, b: 2},
{a: 3, b: 4, c: 66},
{a: 5, b: 6, c: 55, d: 66},
{a: 7, b: 8, c: 12, e: 15}
];
var keys = new Set();
for(object of jsObjects) {
for(key in object) {
keys = keys.add(key);
}
}
for (const key of keys) {
console.log(key);
}

I tried this solution: iterating on jsObjects elements and pushing keys
into columns array if not present.
var jsObjects = [
{a: 1, b: 2},
{a: 3, b: 4, c: 66},
{a: 5, b: 6, c: 55, d: 66},
{a: 7, b: 8, c: 12, e: 15}
];
let columns = [];
jsObjects.forEach(
o => {
Object.keys(o).forEach(
t => {
if (columns.indexOf(t) < 0 ) {
columns.push(t);
}
}
)
}
)
console.log(columns);

How to group by multiple keys at the same time using D3?

This works, but I was wondering if there was a better way than creating a string with a and b and later splitting it:
const data = [
{ a: 10, b: 20, c: 30, d: 40 },
{ a: 10, b: 20, c: 31, d: 41 },
{ a: 12, b: 22, c: 32, d: 42 }
];
d3.rollups(
data,
x => ({
c: x.map(d => d.c),
d: x.map(d => d.d)
}),
d => `${d.a} ${d.b}`
)
.map(([key, values]) => {
const [a, b] = key.split(' ');
return {a, b, ...values};
});
// OUTPUT
// [
// {a: "10", b: "20", c: [30, 31], d: [40, 41]},
// {a: "12", b: "22", c: [32], d: [42]}
// ]

With d3 v7 released, there is now a better way to do this using the new d3.flatRollup.
const data = [
{ a: 10, b: 20, c: 30, d: 40 },
{ a: 10, b: 20, c: 31, d: 41 },
{ a: 12, b: 22, c: 32, d: 42 }
];
const result = d3.flatRollup(
data,
x => ({
c: x.map(d => d.c),
d: x.map(d => d.d)
}),
d => d.a,
d => d.b
);
console.log(result);
const flattened = result.map(([a, b, values]) => ({a, b, ...values}));
console.log(flattened);
<script src="https://cdn.jsdelivr.net/npm/d3-array#3.0.2/dist/d3-array.min.js"></script>

As you already know d3.rollups() will create nested arrays if you have more than one key:
If more than one key is specified, a nested Map [or array] is returned.
Therefore, as d3.rollups doesn't fit your needs, I believe it's easier to create a plain JavaScript function (I'm aware of "using D3" in your title, but even in a D3 code nothing forbids us of writing plain JS solutions where D3 has none).
In the following example I'm purposefully writing a verbose function (with comments) so each part of it is clear, avoiding more complex features which could make it substantially short (but more cryptic). In this function I'm using reduce, so the data array is looped only once. myKeys is the array of keys you'll use to rollup.
Here is the function and the comments:
function groupedRollup(myArray, myKeys) {
return myArray.reduce((a, c) => {
//Find the object in the acc with all 'myKeys' equivalent to the current
const foundObject = a.find(e => myKeys.every(f => e[f] === c[f]));
//if found, push the value for each key which is not in 'myKeys'
if (foundObject) {
for (let key in foundObject) {
if (!keys.includes(key)) foundObject[key].push(c[key]);
};
//if not found, push the current object with all non 'myKeys' keys as arrays
} else {
const copiedObject = Object.assign({}, c);//avoids mutation
for (let key in copiedObject) {
if (!keys.includes(key)) copiedObject[key] = [copiedObject[key]];
};
a.push(copiedObject);
};
return a;
}, [])
};
Here is the demo:
const data = [{
a: 10,
b: 20,
c: 30,
d: 40
},
{
a: 10,
b: 20,
c: 31,
d: 41
},
{
a: 12,
b: 22,
c: 32,
d: 42
}
];
const keys = ["a", "b"];
console.log(groupedRollup(data, keys))
function groupedRollup(myArray, myKeys) {
return myArray.reduce((a, c) => {
const foundObject = a.find(e => myKeys.every(f => e[f] === c[f]));
if (foundObject) {
for (let key in foundObject) {
if (!keys.includes(key)) foundObject[key].push(c[key]);
};
} else {
const copiedObject = Object.assign({}, c);
for (let key in copiedObject) {
if (!keys.includes(key)) copiedObject[key] = [copiedObject[key]];
};
a.push(copiedObject);
};
return a;
}, [])
};
And here is a demo with a more complex data:
const data = [{
a: 10,
b: 20,
c: 30,
d: 40,
e: 5,
f: 19
},
{
a: 10,
b: 55,
c: 37,
d: 40,
e: 5,
f: 19
},
{
a: 10,
b: 20,
c: 31,
d: 48,
e: 5,
f: 18
},
{
a: 80,
b: 20,
c: 31,
d: 48,
e: 5,
f: 18
},
{
a: 1,
b: 2,
c: 3,
d: 8,
e: 5,
f: 9
},
{
a: 10,
b: 88,
c: 44,
d: 33,
e: 5,
f: 19
}
];
const keys = ["a", "e", "f"];
console.log(groupedRollup(data, keys))
function groupedRollup(myArray, myKeys) {
return myArray.reduce((a, c) => {
const foundObject = a.find(e => myKeys.every(f => e[f] === c[f]));
if (foundObject) {
for (let key in foundObject) {
if (!keys.includes(key)) foundObject[key].push(c[key]);
};
} else {
const copiedObject = Object.assign({}, c);
for (let key in copiedObject) {
if (!keys.includes(key)) copiedObject[key] = [copiedObject[key]];
};
a.push(copiedObject);
};
return a;
}, [])
};
Finally, pay attention that this function will push duplicated values (in the above example d: [40, 40, 33]). If that's not what you want then just check for duplicates.

The approach below allows you to remove the split, but does not prevent the need to create a string for the compound key. In this case, using JSON.stringify({a: d.a, b: d.b}) instead of ${d.a} ${d.b}, allows for the map to return an object where the c and d properties can be assigned to the parse of the key.
This preserves some of the 'd3-ishness' of your question and the utility of rollups to deal with the creation of the arrays for c and d.
const data = [
{ a: 10, b: 20, c: 30, d: 40 },
{ a: 10, b: 20, c: 31, d: 41 },
{ a: 12, b: 22, c: 32, d: 42 }
];
const groups = d3.rollups(
data,
x => ({
c: x.map(d => d.c),
d: x.map(d => d.d)
}),
d => JSON.stringify({a: d.a, b: d.b}) // compare with `${d.a} ${d.b}`
).map(arr => Object.assign(JSON.parse(arr[0]), arr[1]));
console.log(groups);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"></script>
The approach can accommodate the extensibility of #Gerado Furtado's answer, but I fear it's getting a little hectic:
const data = [
{a: 10, b: 20, c: 30, d: 40, e: 5, f: 19},
{a: 10, b: 55, c: 37, d: 40, e: 5, f: 19},
{a: 10, b: 20, c: 31, d: 48, e: 5, f: 18},
{a: 80, b: 20, c: 31, d: 48, e: 5, f: 18},
{a: 1, b: 2, c: 3, d: 8, e: 5, f: 9},
{a: 10, b: 88, c: 44, d: 33, e: 5, f: 19}
];
const keys = ["a", "e", "f"];
const groupedRollup = (data, keys) => {
const others = Object.keys(data[0])
.filter(k => !keys.includes(k)); // finds b, c, d as not part of compound key
return d3.rollups(
data,
x => Object.assign(
{},
...others.map(k => {
return {[k]: x.map(d => d[k])} // dynamically create reducer
})
),
d => JSON.stringify(
Object.assign(
{},
...keys.map(k => {
return {[k]: d[k]} // dynamically add keys
})
)
) // and stringify for compound key
).map(arr => Object.fromEntries( // sorting the output object
Object.entries( // keys in alpha order
Object.assign(JSON.parse(arr[0]), arr[1])).sort() // same approach
)
);
}
console.log(groupedRollup(data, keys));
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"></script>
There's some interesting talk about the introduction of use of InternMap in rollups and the associated functions - but I don't see either that it's ready, or that it's useful for what you are trying to do.

Delete multiple keys from array of Object

Let's say we have an array of object:
var obj = [{a: 1, b: 2, c: 3, d: 4, e: 5 },{a: 6, b: 7, c:
8, d: 9, e: 0 }];
and we want to delete key c,e from both of the objects.
How can it be done? One of the methods I found is:
['c', 'e'].forEach(e => delete obj[e]); //for object
Is there any other way so we don't have to use double for loop.

One way to do it is to use .map() together with object destructuring:
var obj = [
{ a: 1, b: 2, c: 3, d: 4, e: 5 },
{ a: 6, b: 7, c: 8, d: 9, e: 0 },
];
var newObj = obj.map(({ c, e, ...rest }) => rest);
console.log(newObj)
This will create a new array with new objects which contain all of the other keys except for c and e.

You have 2 options to resolve it:
By using object destructuring: map(({ a,b,c,d,e }) => ({a,b,d})
Enhance option 1 by using using [Rest parameters] { c, e, ...rest }
Object destructuring like below
const obj = { a: 1, b: 2, c: 3, d: 4, e: 5 } var {c, e} = obj; // c = 3, e = 5
With option 2, you will have c,e implicit name and the remaining items named rest. After that, you just need to get rest items.
Option 1
var obj =
[
{ a: 1, b: 2, c: 3, d: 4, e: 5 },
{ a: 6, b: 7, c: 8, d: 9, e: 0 },
];
console.log(obj.map(({ a,b,c,d,e }) => ({a,b,d})));
Option 2
var obj =
[
{ a: 1, b: 2, c: 3, d: 4, e: 5 },
{ a: 6, b: 7, c: 8, d: 9, e: 0 },
];
console.log(obj.map(({ c, e, ...rest }) => rest));
// ...rest: the same as `a,b,d`

How to get some props of list array object by using reduce

I have list array object like:
let arr = [
{ a: 1, b: 2, c: 3, d: 4 },
{ a: 2, b: 3, c: 4, d: 5 },
{ a: 5, b: 6, c: 7, d: 8 }
]
and after using reduce()
// get props **b, c**
let arr_result = arr.reduce( ... )
// arr_result = [
// { b: 2, c: 3 },
// { b: 3, c: 4 },
// { b: 6, c: 7 }
// ]

use map.
let arr = [{
a: 1,
b: 2,
c: 3,
d: 4
},
{
a: 2,
b: 3,
c: 4,
d: 5
},
{
a: 5,
b: 6,
c: 7,
d: 8
}
]
const output = arr.map(({b, c}) => ({b, c}));
console.log(output);

You can use ES6(and beyond)'s object destructuring.
const arr = [
{ a: 1, b: 2, c: 3, d: 4 },
{ a: 2, b: 3, c: 4, d: 5 },
{ a: 5, b: 6, c: 7, d: 8 }
]
const res = arr.map(obj => {
const { b, c } = obj;
return { b, c };
});
console.log(res);

Since you asked to achieve this using reduce, here is the way. Pass an empty array as thisArg & inside reduce callback function create an object with required key and push it to the accumulator
let arr = [{
a: 1,
b: 2,
c: 3,
d: 4
},
{
a: 2,
b: 3,
c: 4,
d: 5
},
{
a: 5,
b: 6,
c: 7,
d: 8
}
];
let newArr = arr.reduce(function(acc, curr) {
acc.push({
b: curr.b,
c: curr.c
})
return acc;
}, [])
console.log(newArr)

If you want to use reduce:
const arr = [{a:1,b:2,c:3,d:4},{a:2,b:3,c:4,d:5},{a:5,b:6,c:7,d:8}];
const res = arr.reduce((a, { b, c }) => (a.push({ b, c }), a), []);
console.log(res);
.as-console-wrapper { max-height: 100% !important; top: auto; }
It's honestly a lot easier with map:
const arr = [{a:1,b:2,c:3,d:4},{a:2,b:3,c:4,d:5},{a:5,b:6,c:7,d:8}];
const res = arr.map(({ b, c }) => ({ b, c }));
console.log(res);
.as-console-wrapper { max-height: 100% !important; top: auto; }