We Keep Coding

How to compare two arrays and return another one?

How to compare two arrays and return another one?
I'm trying to compare two arrays to compare records by id and then render a new array
const arr1 = [
{ id: 1, title: "Admin" },
{ id: 2, title: "Vip" }
];
const arr2 = [
{
id: 1,
root: 1
},
{
id: 2,
root: 0
}
];
let intersection = arr1.filter(({ id }) => arr2.includes(id));
need:
const needArr = [
{ id: 1, title: "Admin", root: 1 },
{ id: 2, title: "Vip", root: 0 }
];

You could make use of map() and find() and iterate over the first array arr1:
const needArr = arr1.map(entry => {
const root = arr2.find(arr2Entry => entry.id === arr2Entry.id)?.root
return {...entry, root: root}
} )
The root property will be set to undefined for each entry in the needArr result if there is no entry with the same id in arr2 as in arr1.

Something like this could work,
const giveNew = (a, b) => {
let shorter, longer;
if(a.length>b.length){
longer = a;
shorter = b;
} else {
longer = b;
shorter = a;
}
return longer.map((v, i)=> {
const matched = shorter.find(val=> val.id === v.id);
if(matched){
return {
...v, ...matched
}
}
})
}

Assuming there's a 1:1 relationship between the arrays - map over one of the arrays, find the corresponding object in the other array by its id, and then return a new updated object.
const arr1=[{id:1,title:"Admin"},{id:2,title:"Vip"}],arr2=[{id:1,root:1},{id:2,root:0}];
const out = arr2.map(obj => {
return {
...arr1.find(inner => inner.id === obj.id),
root: obj.root
};
});
console.log(out);

As is pointed out in Merge two array of objects based on a key, you can do this:
let intersection = arr1.map(item => ({...item, ...arr2.find(item2 => item.id === item2.id)}));

I tried this worked.
const arr1 = [
{ id: 1, title: "Admin" },
{ id: 2, title: "Vip"}
];
const arr2 = [
{
id: 1,
root: 1
},
{
id: 2,
root: 0
}
];
for(var i=0 ;i < arr2.length; i++)
{
objIndex = arr1.findIndex((obj => obj.id == arr2[i].id));
arr1[objIndex].root = arr2[i].root;
}
console.log(arr1);

Hope this satisfies your use case. This also works in the case where there is no 1:1 mappings.
const arr1 = [
{ id: 1, title: "Admin" , root: 0 },
{ id: 2, title: "Vip" , root: 0 },
{ id: 100, title: "NotExistInArr2" , root: 0 }
];
const arr2 = [
{
id: 1,
root: 1
},
{
id: 2,
root: 0
},
{
id: 200,
root: 0
}
];
const consolidatedIds = arr1.map(a => a.id).concat(arr2.map(a => a.id));
//console.log(consolidatedIds);
const consolidatedDedupedIds = arrayUnique(consolidatedIds);
//console.log(consolidatedDedupedIds);
const needArr = consolidatedDedupedIds.map(entry => {
const arr1Item = arr1.find(arr1Entry => entry === arr1Entry.id);
const arr2Item = arr2.find(arr2Entry => entry === arr2Entry.id);
return {...arr1Item, ...arr2Item}
} )
console.log(needArr)
//--- utility function
function arrayUnique(array) {
var a = array.concat();
for(var i=0; i<a.length; ++i) {
for(var j=i+1; j<a.length; ++j) {
if(a[i] === a[j])
a.splice(j--, 1);
}
}
return a;
}
Note: improvised version of other questions, inspired from other answers

dynamically generated deep objects

I want to ask for help with the problem. I have an existing deep Javascript object from which I want to dynamically generate multiple versions.
I have a method that has 2 parameters.
first: the object from which I want to generate new ones,
second: a number or an array of numbers
for example:
let myObj = {
brown: {
50: '#f9f8f2',
100: '#f3f0e6',
},
singleProp: '#e6b01e',
propLvl1: {
color: '#32a852',
sub1: {
color: '#44eff2',
sub2: {
color: '#f2448d'
},
},
},
};
myFunction(myObject, [10, 30]);
my goal would be:
MY-10-brown: {
50: '#(DYNAMICVALUE)f9f8f2',
100: '#(DYNAMICVALUE)f3f0e6',
},
MY-10-singleProp: '#(DYNAMICVALUE)e6b01e',
MY-10-propLvl1: {
color: '#(DYNAMICVALUE)32a852',
sub1: {
color: '#(DYNAMICVALUE)44eff2',
sub2: {
color: '#(DYNAMICVALUE)f2448d'
},
},
}
MY-30-brown: {
50: '#(DYNAMICVALUE)f9f8f2',
100: '#(DYNAMICVALUE)f3f0e6',
},
MY-30-singleProp: '#(DYNAMICVALUE)e6b01e',
MY-30-propLvl1: {
color: '#(DYNAMICVALUE)32a852',
sub1: {
color: '#(DYNAMICVALUE)44eff2',
sub2: {
color: '#(DYNAMICVALUE)f2448d'
},
},
}
So far I have reached him:
export default function generateObjects(obj, numbers) {
let newObj = {};
for (let q = 0; q < transparentValue.length; q += 1) {
let Obj = doTheJob(obj, transparentValue[q]);
Object.assign(newObj, Obj);
}
return newObj;
}
function doTheJob(obj, number) {
const newObj = {};
let newKey = '';
Object.keys(obj).forEach(function (key) {
let trim = `${obj[key]}`.substring(1);
let newValue = `#${anotherObject[number]}${trim}`;
if (typeof obj[key] === 'object') {
newKey = `MY-${number}-${key}`;
newObj[newKey] = obj[key];
generateNewObj(newObj[newKey], number);
return;
}
if (typeof obj[key] === 'string') {
newObj[key] = newValue;
}
});
return newObj;
}

You could create new properties for the first level of the object and take copies of data.
const
copy = value => typeof value === 'object'
? Object.fromEntries(Object.entries(value).map(([k, v]) => [k, copy(v)]))
: typeof value === 'string'
? value.replace('#', '#DYNAMICVALUE')
: value
create = (object, values, header) => Object.fromEntries(Object
.entries(object)
.reduce((r, [k, v]) => [...r, ...values.map(i => [[header, i, k].join('-'), copy(v)])], [])
),
myObj = { brown: { 50: '#f9f8f2', 100: '#f3f0e6' }, singleProp: '#e6b01e', propLvl1: { color: '#32a852', sub1: { color: '#44eff2', sub2: { color: '#f2448d' } } } };
console.log(create(myObj, [10, 30], 'my'));
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can:
Create a new object
Loop through each number in the array
Inside the loop, loop through each property in the object and assign the value of the property to the new object's modified property ("MY-"+num+"-"+prop).
let myObj = {
brown: {
50: '#f9f8f2',
100: '#f3f0e6',
},
singleProp: '#e6b01e',
propLvl1: {
color: '#32a852',
sub1: {
color: '#44eff2',
sub2: {
color: '#f2448d'
},
},
},
};
function process(obj, numArr){
const newObj = {};
for(const num of numArr){
for(const prop in obj){
newObj['MY-'+num+'-'+prop] = obj[prop];
}
}
return newObj;
}
console.log(JSON.stringify(process(myObj, [10, 30]), 0, 2))
.as-console-wrapper{max-height:100%!important;top:0}

Data transformation horizontal to vertical javascript

I need help in transforming data in a particular way to plot a graph. The data which I get from API is a different format. Please guide me on how to transform it
const demo = [
{
label: 'ABC',
vMini: 28,
vMaxi: 56,
dMini: 2,
dMaxi: 50,
},
{
label: 'BCD',
vMini: 2,
vMaxi: 56,
dMini: 3,
dMaxi: 50,
},
];
end result which i want is
[
{
section: "vMini",
"ABC": 28,
"BCD": 2,
},
{
section: "vMaxi",
"ABC": 56,
"BCD": 56
}
{
section: "dMini",
"ABC": 2,
"BCD": 3,
},
{
section: "dMaxi",
"ABC": 50,
"BCD": 50
}
]
I have started working on it and got confused with second loop.
for (let i = 0; i < demo.length; i += 1) {
for (let j in demo[i]) {
if (j === 'label') {
}
}
}

This one is a bit tricky with the way the data is structured, but you should be able to do this with array.reduce, like so:
const demo = [{label:"ABC",vMini:28,vMaxi:56,dMini:2,dMaxi:50},{label:"BCD",vMini:2,vMaxi:56,dMini:3,dMaxi:50}];
// get array of keys, and create a new object for each one except label
// ["label", "vMini", "vMaxi", "dMini", "dMaxi"]
let results = Object.keys(demo[0]).reduce((res, key) => {
if (key === "label") { return res; }
else {
// for each item in demo, create a key for the label and grab the key's value
let newObj = demo.reduce((_res, obj) => {
_res[obj.label] = obj[key];
return _res;
}, {section: key})
// push the new object into the results array
res.push(newObj);
}
return res;
}, [])
console.log(results);

Using reduce() and Map()
const demo = [{label:"ABC",vMini:28,vMaxi:56,dMini:2,dMaxi:50},{label:"BCD",vMini:2,vMaxi:56,dMini:3,dMaxi:50}];
const resMap = demo.reduce((a, v) => {
let label = v.label
for (let k in v) {
if (k == 'label') continue
a.has(k) || a.set(k, { section: k })
let o = a.get(k)
o[label] = v[k]
}
return a
}, new Map())
const resArr = [...resMap.values()]
console.log(resArr)

How to detect object differences between two arrays?

I'm trying to compare two arrays of objects and returns a list of updated objects. I don't want to use lodash just the javascript data structures and functions.
E.g:
I have a first array which named arr1 = [
{
name: 'attribute 1',
id: 12,
value: 40,
docs:[],
version: 1,
},
{
name: 'attribute 41',
id: 12,
value: 6,
version: 1,
}
]
And another array:
array2 = [
{
name: 'attribute 1',
attributeTypeId: 12,
value: 65,
docs: ['bla bla']
}
]
I'm trying to iterate through the two arrays and detect the differences and returns an array like that:
result = [
{
name: 'attribute 1',
id: 12,
value: 65,
docs:['bla bla'],
version: 1,
},
{
name: 'attribute 41',
id: 12,
value: 6,
version: 1,
}]
I wrote some uncomplete function (not optimized yet just a brute force solution):
const filterProperties = (e) => {
return e.toLowerCase() !== 'name' && e.toLowerCase() !== 'id'
}
// function sort
const sortProperties = (a, b) => a < b ? -1 : 1;
let result = []
attributesUpdate.forEach(attr => {
const attrProps = Object.getOwnPropertyNames(attr);
// iterate the attributes
for (let i = 0; i < attributes.length; i++) {
let attribute = attributes[i];
// check if the attribute to update has a different name or attributeTypeId
if (attribute.name !== attr.name) {
result = result.concat(attr);
}
// check if the attribute to update has the same name, id
// of the originalOne
if (attribute.name === attr.name && attribute.id=== attr.id) {
let obj = {
name: attribute.name,
id: attribute.id,
}
// get the properties of the attribute
const attributeProps = Object.getOwnPropertyNames(attribute);
// extract the name and id from the list
const filtredAttributeProps = attributeProps.filter(filterProperties);
const filteredattrProps = attrProps.filter(filterProperties);
// returns the length of each array of properties
const attrLength = filteredattrProps.length;
const attributeLength = filtredAttributeProps.length;
if (attrLength === attributeLength) {
for (let j = 0; j < attrLength; j++) {
const propName = filteredattrProps[j];
obj[propName] = attr[propName];
}
result = result.filter(e => e.name === attr.name
&& e.id=== attr.id)
.map(e => Object.assign(e, {obj}))
}
if (attrLength !== attributeLength) {
// sort the array of properties
const sortedAttrProps = filteredattrProps.sort(sortProperties);
const sortedAttributeProps = filtredAttributeProps.sort(sortProperties);
// check the shortest object
const min = attrLength < attributeLength ? attrLength : attributeLength;
// get the biggest object
const longestObjProps = attrLength === min ? sortedAttributeProps : sortedAttrProps;
const longestObj = attrLength === min ? attribute : attr
const shortestProps = attrLength === min ? sortedAttrProps: sortedAttributeProps;
const shortestObj = attrLength === min ? attr : attribute
// fill the object with attr properties
for(let j = 0; j < min; j++) {
const propName = shortestProps[j];
obj[propName] = shortestObj[propName];
}
// fill the remaining properties in the object
const remainingProperties = longestObjProps.filter(e => !shortestProps.includes(e));
for (let j = 0; j < remainingProperties.length; j++) {
const propName = remainingProperties[j];
obj[propName] = longestObj[propName]
}
if (!result.length || result.filter(e => e.name !== attr.name &&
e.id!== attr.id).length === 0) {
result.concat(obj);
}
}
}
}
})
console.log('result: ', result);
I got such a result :
[
{
name: 'attribute 1',
attributeTypeId: 12,
value: 65,
docs: ['bla bla']
}
]
How can I fix this code to get the desired results? I hope that my question will not be downvoted. Any suggestion will be welcome.

What this code does is loop through the objects in array2, and then when it finds that there is a matching name/id in arr1, it simply updates the properties of that object. If not found, it will add the object to arr1.
arr1 = [{
name: 'attribute 1',
id: 12,
value: 40,
docs: [],
version: 1,
},
{
name: 'attribute 41',
id: 12,
value: 6,
version: 1,
}
];
array2 = [{
name: 'attribute 1',
attributeTypeId: 12,
value: 65,
docs: ['bla bla']
}];
updateArray(arr1, array2);
console.log(arr1);
function updateArray(arrayToUpdate, dataToUpdateWith) {
dataToUpdateWith.forEach(function(obj) {
var objToUpdate = checkIfNameIdExists(arrayToUpdate, obj.name, obj.attributeTypeId);
if (objToUpdate === false) {
objToUpdate = obj;
arrayToUpdate.push(objToUpdate);
} else {
for (var prop in obj) {
if (objToUpdate.hasOwnProperty(prop)) {
var nameInFinalObject = prop;
if (prop === "attributeTypeId") {
nameInFinalObject = "id";
}
objToUpdate[nameInFinalObject] = obj[prop];
}
}
}
});
}
function checkIfNameIdExists(arrOfObj, name, id) {
if (name === null) {
return false;
}
var output = false;
arrOfObj.forEach(function(obj) {
if (obj.name === name) {
output = obj;
return true;
}
});
return output;
}

Assumptions:
The values in each of the objects are same type and values are not nested so there is a need to recursively traverse the tree to compare equality etc.
The first array is the source and the subsequent (with the same name) is the mutated form.
We are not handling removals of properties from the source object. From what is given by the OP we are only accounting for value changes.
const d1 = [{ name: 'attribute 1', id: 12, value: 40, docs: [], version: 1, }, { name: 'attribute 41', id: 12, value: 6, version: 1, } ]
const d2 = [{ name: 'attribute 1', attributeTypeId: 12, value: 65, docs: ['bla bla'] }]
const isChanged = (a, b) =>
Array.isArray(a) ? !a.every(x => b.includes(x)) : a !== b
const compare = (o1, o2) => Object.entries(o1).reduce((r, [k,v]) => {
if(k in o2 && isChanged(o2[k], v))
Object.assign(r, {[k]: o2[k]})
return r
}, o1)
const group = (a, b) => [...a, ...b].reduce((r,c) =>
(r[c.name] = [...r[c.name] || [], c], r), {})
const result = Object.values(group(d1,d2)).reduce((r,c) =>
(r.push(c.length == 2 ? compare(...c) : c[0]), r), [])
console.log(result)
The idea is to merge the objects in one array, group them by name and if there ware any changes the groups with length of 2 would be compared by the compare function. Otherwise just added to the end result.

Compare two Objects and determine the parent node of differed properties

I have a scenario, were need to compare treeObject1 and treeObject2 to determine the exact difference at property level and find the parent of modified node.
In below provided objects, I need to get output as color blue. Since the difference is at otherObj2.
treeObject1 = {
color: "red",
value: 10,
otherObj: {
color: "blue",
otherObj2: {
otherColor: "blue",
otherValue: 20,
}
}
}
treeObject2 = {
color: "red",
value: 10,
otherObj: {
color: "blue",
otherObj2: {
otherColor: "Green",
otherValue: 20,
}
}
}

If you want the key "otherObj" as well let me know, that can easily be added. Otherwise here is a working version of what you were looking for.
This uses a combination of Object.keys and every
treeObject1 = {
color: "red",
value: 10,
otherObj: {
color: "blue",
otherObj2: {
otherColor: "blue",
otherValue: 20,
}
}
}
treeObject2 = {
color: "red",
value: 10,
otherObj: {
color: "blue",
otherObj2: {
otherColor: "Green",
otherValue: 20,
}
}
}
const findParentNode = (obj1, obj2, parent = null) => {
if(parent === null) parent = obj2;
//since the structures are the same we only get keys from the first object
const keys = Object.keys(obj1);
let result = null;
//iterate through every key
keys.every(key=>{
//if it's an object... then we recall findParentNode (recursive)
if(obj1[key] instanceof Object){
result = findParentNode(obj1[key], obj2[key], obj2);
//If result from findParentNode is not null then a difference was found.
//Return false to stop the every method.
if(result !== null) return false;
}else if(obj1[key] !== obj2[key]){
//If the objects are different we found a difference
//Set the parent as the difference
result = parent;
return false;
}
//return true to keep on looping
return true;
});
//return the result
return result;
}
console.log(findParentNode(treeObject1, treeObject2));
** note that the above snippet will return "null" if nothing was found. **

You could use a nested approach for objects and by checking the values.
function getDiffParents(object1, object2, parent = {}) {
return Object.assign(...Object.entries(object1).map(([k, v]) => v && typeof v === 'object'
? getDiffParents(v, object2[k], object1)
: v === object2[k]
? {}
: parent
));
}
var treeObject1 = { color: "red", value: 10, otherObj: { color: "blue", otherObj2: { otherColor: "blue", otherValue: 20 } } },
treeObject2 = { color: "red", value: 10, otherObj: { color: "blue", otherObj2: { otherColor: "Green", otherValue: 20 } } };
console.log(getDiffParents(treeObject1, treeObject2));
.as-console-wrapper { max-height: 100% !important; top: 0; }