We Keep Coding

Compare two objects with specified keys in TS

I am trying to compare two objects but only with three keys instead of all keys. It looks like this:
Object.keys(StateA)
.filter((k) => [k == 'name', 'x', 'y'])
.every((k) => StateA[k] == StateB[k])
)
I am getting false results; what I am doing wrong?

There's no need to filter keys if you already have/know the ones to compare beforehand; use every just as you are:
const A = { a: 0, b: 1, c: 2, x: 3, y: 4, z: 5 };
const B = { a: 0, b: 2, c: 3, x: 3, y: 4, z: 6 };
const match = ['a', 'x', 'y'].every(key => A[key] === B[key]);
console.log(match);
Keep in mind a simple check like this may give you false positives - it depends on what you want. One case would be a key missing in one object but present in the other set to undefined. If that's the case, you may want to also check for the presence of the key:
const A = { a: 0, b: 1, c: undefined };
const B = { a: 0, b: 1 };
const keys = ['a', 'b', 'c'];
const match = keys.every(key => A[key] === B[key]);
console.log(match); // true
const stricterMatch = keys.every(key => (
key in A && key in B && A[key] === B[key]
));
console.log(stricterMatch); // false

export function hasSameProps (source: Record<string,unknown>, target: Record<string,unknown>) {
Object.keys(source).every(key => target.hasOwnProperty(key));
or
for (const key in ObjA) {
const current = ObjB[key];
if (!current) {
// does not exists
}
}

How to expand single level nested hashes on the fly?

I have an object where a few of the keys are nested single level hashes. In this example only b is nested.
const j = {
a: 'A',
b: {
bb: 'BB',
bbb: 'BBB',
},
c: 'C'
};
Question
What I am looking for is a way to loop over the object and if a key is a nested object, then print its keys instead.
a
bb
bbb
c
Does anyone know how to do that?

You can do this recursively:
function printKeys(obj) {
for (const [key, val] of Object.entries(obj)) {
if (typeof val === "object") {
printKeys(val);
} else {
console.log(key);
}
}
}
If you only have one level of nesting at most, #blex's answer is probably the better one.

You could do it with Object.entries and flatMap:
const j = { a: 'A', b: { bb: 'BB', bbb: 'BBB' }, c: 'C' };
function getOneLevelKeys(obj) {
return Object.entries(obj)
.flatMap(([key, value]) => typeof value === "object" ? Object.keys(value) : key);
}
console.log( getOneLevelKeys(j) );

You can use a recursive flatMap with Object.keys.
const j = {
a: 'A',
b: {
bb: 'BB',
bbb: 'BBB',
},
c: 'C'
};
const getKeys = o => Object.keys(o).flatMap(x => o[x] === Object(o[x])
? getKeys(o[x]) : x);
console.log(getKeys(j));

JavaScript Reduce an array to find match in Object

I am trying to incorporate array method: reduce.
Basically, what I am trying to accomplish here is to reduce the array below to an object where anything that matches obj's key value.
const arr = ['a', 'c', 'e'];
const obj = { a: 1, b: 2, c: 3, d: 4 };
let output = select(arr, obj);
console.log(output); // --> { a: 1, c: 3 }
My select method:
function select(arr, obj) {
let newObj = {};
for (let prop in obj) {
for (let i = 0; i < arr.length; i++) {
if (prop === arr[i]) {
newObj[prop] = obj[prop];
}
}
}
return newObj;
}
I set {} as initializer for arr.reduce as such if current value of array matches key of object then it would add to accumulator the key value, but I am receiving an error message from the console that if expression cannot return boolean.
Here is my attempt using .reduce():
function select(arr, obj) {
let result = arr.reduce(function(x, y) {
if (y in obj) {
x[y] = obj[y]
return x;
}
}, {})
return result;
}
Please advise.

You must always return the accumulator. Here is how to use reduce
function select(arr, obj) {
return arr.reduce(function (acc, key) {
if (key in obj) acc[key] = obj[key];
return acc;
}, {});
}
const arr = ['a', 'c', 'e'];
const obj = { a: 1, b: 2, c: 3, d: 4 };
let output = select(arr, obj);
console.log(output); // --> { a: 1, c: 3 }

The accumulator should be returned in all the cases.
I used an implementation using a filter for your reference:
const arr = ['a', 'c', 'e'];
const obj = { a: 1, b: 2, c: 3, d: 4 };
function select (obj,arr){
let newObj = Object.keys(obj).filter(key => arr.includes(key)).reduce((acc,key) => {
acc[key]=obj[key]
return acc
},{})
return newObj
}
console.log(select(obj,arr));

function select(arr, obj) {
return arr.reduce((acc, curr) => {
if(obj[curr]) {
acc[curr] = obj[curr];
}
return acc;
}, {})
}

How to get specific properties of array of objects in JS?

I have the following code and test data:
const getNestedObject = (nestedObj, pathArr) => {
return pathArr.reduce((obj, key) => {
return (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj;
});
}
const obj =
[
{
a: 1,
c: [
{
d: 1,
e: 'string',
f: [
{
value: 0,
},
{
value: 1,
}
],
},
],
},
{
a: 2,
c: [
{
d: 2,
e: 'string',
f: [
{
value: 3,
},
{
value: 4,
}
],
},
],
},
];
console.log(obj);
const fs = obj.map(o => getNestedObject(o, ['c', 'f']));
console.log(fs);
What I want to do is given the array of objects shown below, I want to get only the property called f from every object in the array. So, basically end result should be array of f values of every object. Since 'f' is an array, I would highly appreciate the end result to be just one array with elements from all 'f' properties, so kind of every of these 'f' to be spread out, so I have one array. My above getNestedObject function does not seem to work, as when the console.log statement below returns the whole object. Any ideas how to do this in JS?
So basically the end result should be:
[{ value: 0 }, { value: 1 }, { value: 3 }, {value: 4 }]

You can combine reduce() with map(). Basically reduce your main array into an flattened array of all the c.f items. This checks for the c property just in case the object doesn't have it:
const obj = [{a: 1,c: [{d: 1,e: 'string',f: [{value: 0,},{value: 1,}],},],},{a: 2,c: [{d: 2,e: 'string',f: [{value: 3,},{value: 4,}],},],},];
let Fs = obj.reduce((arr, item) =>
item.c
? arr.concat(...item.c.map(itemc => itemc.f )) // concat for flattened rather than nested arrays
: arr
, []);
console.log(Fs)

Here's a fast iterative solution that won't overflow the stack, makes no assumptions about target result values being arrays (only spreads if they are) and doesn't hard-code child key names (it'll explore any values that are arrays).
This can also work if the target has children matching the key that you'd like to include in the search (swap else if with if).
const get = (data, target) => {
const result = [];
const stack = [data];
while (stack.length) {
const curr = stack.pop();
for (const o of curr) {
for (const k in o) {
if (k === target) {
if (Array.isArray(o[k])) {
result.push(...o[k]);
}
else {
result.push(o[k]);
}
}
else if (Array.isArray(o[k])) {
stack.push(o[k]);
}
}
}
}
return result;
};
const obj =
[
{
a: 1,
c: [
{
d: 1,
e: 'string',
f: [
{
value: 0,
},
{
value: 1,
}
],
},
],
},
{
a: 2,
c: [
{
d: 2,
e: 'string',
f: [
{
value: 3,
},
{
value: 4,
}
],
},
],
},
];
console.log(get(obj, "f"));

You can recursively traverse any objects and arrays to fetch a given property. This works at any depth and doesn't care about the structure of the objects:
const obj=[{a:1,c:[{d:1,e:"string",f:[{value:0},{value:1}]}]},{a:2,c:[{d:2,e:"string",f:[{value:3},{value:4}]}]}];
//curried function to grab a property by name off some object or array
function grab(prop) {
//naming the inner function means it can be called recursively by name
return function recursiveGrab(target) {
if (Array.isArray(target)) {
const arrayResult = target
.filter(x => typeof x === "object") //remove non-objects (and non-arrays)
.filter(Boolean) //remove null
.map(recursiveGrab); //recursively call for the remaining objects
return flatten(arrayResult); //return a single dimensional array
}
//an object has the property - return it
if (prop in target) {
return target[prop];
}
//object doesn't have the property - check all values
return recursiveGrab(Object.values(target));
}
}
//small helper function. It's separated only to keep the logic for the traversal clear
function flatten(arr) {
return arr.reduce((acc, curr) => acc.concat(curr), [])
}
const grabF = grab('f');
console.log(grabF(obj));

I did not notice that f was always inside c. I have this recursive and dirty looking solution that works with f being inside any of the fields
const objArray = [
{
a: 1,
c: [
{
d: 1,
e: 'string',
f: [
{
value: 0,
},
{
value: 1,
}
],
},
],
d: [
{
d: 1,
e: 'string',
f: [
{
value: 'd',
},
{
value: 'd1',
}
],
},
],
},
{
a: 2,
c: [
{
d: 2,
e: 'string',
f: [
{
value: 3,
},
{
value: 4,
}
],
},
],
e: [
{
d: 1,
e: 'string',
f: [
{
value: 'e',
},
{
value: 'e1',
}
],
},
],
}
]
const getFObject = (obj) => {
let fObj = [];
Object.keys(obj).some(key => {
if (key === 'f') {
fObj = obj[key];
return true;
}
if (Array.isArray(obj[key])) {
obj[key].forEach(nestedObj => {
fObj = fObj.concat(getFObject(nestedObj))
});
}
return false;
});
return fObj;
}
const newArray = objArray.reduce((acc, obj) => {
return acc.concat(getFObject(obj))
}, []);
console.log(newArray)

Setting an object's nested key / values by arbitrary number of parameters

Suppose I have some object like:
const someObj = {
x: null,
y: {
z: null
},
a: {
b: {
c: null
}
}
}
I would like to create a function to set values using something like:
const setKV = (obj, ...keyArray) => {
/* Not quite sure how to phrase this function */
const val = keyArray.pop()
}
Such that I can set the values:
x with setKV(someObj, 'x', true)
z with setKV(someObj, 'y', 'z', true)
c with setKV(someObj, 'a', 'b', 'c', true)
How would I define an object's nested key by this arbitrary number of parameters?

You can do this easily using a rest parameter and spread argument like ...rest below. setKV does not mutate its input object, o; a new object is always returned.
const setKV = (o = {}, key, value, ...rest) =>
rest.length === 0
? { ...o, [key]: value }
: { ...o, [key]: setKV (o[key], value, ...rest) }
console.log
( setKV ({ a: 0 }, 'b', 1)
// { a: 0, b: 1 }
, setKV ({ a: { b: { c: false } } }, 'a', 'b', 'c', true)
// { a: { b: { c: true } } }
, setKV ({}, 'a', 'b', 'c', 1)
// { a: { b: { c: 1 } } }
, setKV ({ a: { b: { c: 0 } } }, 'a', 'b', 'd', 0)
// { a: { b: { c: 0, d: 0 } } }
, setKV ({ a: { b: { c: 0 } } }, 'a', 'b', 1)
// { a: { b: 1 } }
, setKV ({ a: 1, b: { c: 2, d: { e: 3 } } }, 'b', 'd', 'e', { f: 4 })
// { a: 1, b: { c: 2, d: { e: { f: 4 } } } }
, setKV ({ a: 0 }, 'b')
// { a: 0, b: undefined }
)
"If I did want to mutate the input object ..."
While mutations should be avoided, the specific needs of your program may warrant their use. In such a case, review mutKV, if only to see how it differs from the implementation above
const mutKV = (o = {}, key, value, ...rest) =>
rest.length === 0
? (o[key] = value, o)
: (o[key] = mutKV (o[key], value, ...rest), o)
const data =
{ a: 0 }
mutKV (data, 'b', 1)
console.log (data)
// { a: 0, b: 1 }
mutKV (data, 'c', 'd', 2)
console.log (data)
// { a: 0, b: 1, c: { d: 2 } }
mutKV (data, 'c', 'd', 3)
console.log (data)
// { a: 0, b: 1, c: { d: 0 } }
mutKV (data, 'c', 4)
console.log (data)
// { a: 0, b: 1, c: 4 }
This opens the book for a short lesson about side effects, and encoding them using effect. Below we create an effect mut using effect, then mut is used in each branch of mutKV. The behavior of the program is identical to mutKV above.
const effect = f => x =>
(f (x), x)
const mut = (key, value) =>
effect (o => o[key] = value)
const mutKV = (o = {}, key, value, ...rest) =>
rest.length === 0
? mut (key, value) (o)
: mut (key, mutKV (o[key], value, ...rest)) (o)

lodash provides what you're looking for, no need to rewrite it
https://lodash.com/docs/4.17.10#set
_.set(someObj, ['a', 'b', 'c'], true);

We can create function where rest params are two element arrays where first item is key name and secound is desired value
function setKV(obj, ...kvs) {
return kvs.reduce((obj, [k, v]) => {
obj[k] = v;
return obj;
}, obj);
}
function setKV(obj, ...kvs) {
return kvs.reduce((obj, [k, v]) => {
obj[k] = v;
return obj;
}, obj);
}
console.log(setKV({}, [
"a",
1
], [
"b",
"b"
]));