How do I obtain the array - javascript

I have an array of objects. Each object has an key of leftpixel. What I am trying to achieve is to obtain an array i.e. newArray with elements that are derived by subtracting leftpixel key value of first obj in array with second leftpixel key value that would make first element of newArray, second element would be obtained by subtracting leftpixel key value of second obj in array with third leftpixel key value.
The array that I have is like this
[
{
A: "FSDF"
B: "$145.0"
leftpixel: 2
},
{
A: "DFH"
B: "$463.0"
leftpixel: 191
},
{
A: "FDH"
B: "$546.0"
leftpixel: 191
},
{
A: "DSG"
B: "$154.0"
leftpixel: 192
}
]
The new Array that I want should be like this
newArray = [189, 0, 1]

You could slice the array and get the delta of the sliced array items and the original array at the same index,
var data = [{ A: "FSDF", B: "$145.0", leftpixel: 2 }, { A: "DFH", B: "$463.0", leftpixel: 191 }, { A: "FDH", B: "$546.0", leftpixel: 191 }, { A: "DSG", B: "$154.0", leftpixel: 192 }],
deltas = data.slice(1).map((v, i) => v.leftpixel - data[i].leftpixel);
console.log(deltas);

This is a slightly verbose implementation that also includes the first value which can be sliced/filtered out later.
let data = [{
A: "FSDF",
B: "$145.0",
leftpixel: 2
},
{
A: "DFH",
B: "$463.0",
leftpixel: 191
},
{
A: "FDH",
B: "$546.0",
leftpixel: 191
},
{
A: "DSG",
B: "$154.0",
leftpixel: 192
}
]
let result = data.map((item, index, arr) => {
if (index === 0) {
return item.leftpixel;
}
return item.leftpixel - arr[index - 1].leftpixel
})
console.log(result.slice(1))

Related

How to loop and push on the accumulator of a reduce function?

I'm trying to reduce an array, and transform it in multiple array.
const array = [
{ a: 1, b: 6 },
{ a: 1, b: 5 },
{ a: 1, b: 6 },
{ a: 1, b: 4 },
{ a: 1, b: 5 }
];
var newArray = array.reduce(
(memo, curr) => {
memo.forEach((item, key) => {
const found = item.filter((el) => el.a === curr.a && el.b === curr.b);
if (found.length > 0) return memo[key].push(curr);
else return memo.push([curr]);
});
return memo;
},
[[]]
);
The needed result I try to get is
[
[
{ a: 1, b: 5 },
{ a: 1, b: 5 }
],
[
{ a: 1, b: 6 },
{ a: 1, b: 6 },
],
[
{ a: 1, b: 4 },
]
];
But as you can see if you try, because I push on the memo, the loop continue to fire. And the result contain hundreds arrays.
How I'm supposed to do to limit this loop and get the right result ?
Thanks a lot in advance :)
You could use Map to group the element by the key of {a, b}, and then get the values of the group
const array = [
{ a: 1, b: 6 },
{ a: 1, b: 5 },
{ a: 1, b: 6 },
{ a: 1, b: 4 },
{ a: 1, b: 5 },
];
var newArray = Array.from(
array
.reduce((map, curr) => {
const key = JSON.stringify({ a: curr.a, b: curr.b });
if (!map.has(key)) {
map.set(key, []);
}
map.get(key).push(curr);
return map;
}, new Map())
.values()
);
console.log(newArray);
Look at your code. You have a triple nested loop, which is insane and definitely not needed to achieve this. Why not use a map?
Here is a function that will do what you want to do with any array of objects given.
const array = [
{ a: 1, b: 6 },
{ a: 1, b: 5 },
{ a: 1, b: 6 },
{ a: 1, b: 4 },
{ a: 1, b: 5 },
];
const separate = (arr) => {
const reduced = arr.reduce((acc, curr) => {
const path = JSON.stringify(curr);
if (!acc[path]) acc[path] = [];
acc[path].push(curr);
return acc;
}, {});
return Object.values(reduced);
};
console.log(separate(array));
If you push inside for loop it will going to push for every reduce function iteration also.
you can achieve by adding some local variables like here
const array = [
{ a: 1, b: 6 },
{ a: 1, b: 5 },
{ a: 1, b: 6 },
{ a: 1, b: 4 },
{ a: 1, b: 5 }
];
// shift changes the orginal array
// it will remove and return firstElement
var firstElement = array.shift(1);
var newArray = array.reduce(
(memo, curr) => {
let isFound = false;
let index = 0;
memo.forEach((item, key) => {
const found = item.filter((el) => el.a === curr.a && el.b === curr.b);
if(found.length > 0){
index = key;
isFound = true;
return;
}
});
if(isFound) {
memo[index].push(curr);
} else {
memo.push([curr]);
}
return memo;
},
[[firstElement]]
);
console.log(newArray);

How to flatten object of objects recursively into array

I have an object like this:
const myObj = {
a: {
b: {
c: 1,
d: 2
},
f: {
z: 4,
u: 6
}
}
}
into this:
const myObj = [
{
c: 1,
d: 2,
},
{
z: 4,
u: 6,
}
]
I found this: How to recursively transform an array of nested objects into array of flat objects? but the original is an array of objects, and mine is an object itself.
You can traverse the values of the objects until you reach the leaves (objects with no values that are other objects).
const myObj = {
a: {
b: {
c: 1,
d: 2
},
f: {
z: 4,
u: 6
}
}
};
const flatObj = o => Object.values(o).some(x => x === Object(x)) ?
Object.values(o).flatMap(flatObj) : [o];
console.log(flatObj(myObj))

return object in an array with the most props

Say I have an array of objects like this:
const arr = [
{ a: 1, b: 2, c: 3, d: 4 },
{ a: 1 },
{ a: 1, b: 2, c: 3 },
{ a: 1, b: 2 }
];
How can I return the object with the most properties/keys? Preferably using in an efficient and terse manner using higher order functions.
You could assign to a single object.
const
array = [{ a: 1, b: 2, c: 3, d: 4 }, { a: 1 }, { a: 1, b: 2, c: 3 }, { a: 1, b: 2 }],
object = Object.assign({}, ...array);
console.log(object);
If you have different values, you could reduce the array.
const
array = [{ a: 1, b: 2, c: 3, d: 4 }, { a: 1 }, { a: 1, b: 2, c: 3 }, { a: 1, b: 2 }],
object = array.reduce((a, b) => Object.keys(a).length > Object.keys(b).length
? a
: b
);
console.log(object);
You can get the number of keys from an object by calling Object.keys(obj) and then checking it's length property.
With that, you could reduce the array by checking each pair of objects and return the one with the most keys as a one liner:
const biggestObject =
arr.reduce((a, b) => Object.keys(a).length > Object.keys(b).length ? a : b);

How to create single object from array of object without overriding the value?

How to achieve below output?
const arr = [{ a: 1 }, { a: 2 }, { a: 3 }];
Required Output: { a: 1 , a: 2 , a: 3 }
The Object.assign overrides the key value and reduces to below output.
Object.assign({}, ...arr); // Output: {a:3}
This is what I should have written on original post -
Array of Object: [{ a: { a: 1 }, b: { a: 2 }, c: { a: 3 } }]
Single Object: { a: { a: 1 }, b: { a: 2 }, c: { a: 3 } }
I was able to achieve it by using below code.
const obj = arr.reduce((accum, value) => {
return { ...accum, ...value }
}, {});

Add new property to object collection based on condition with lodash

I have an array of objects as such:
var data = [{ a: 1 },
{ a: 1 },
{ a: 2 },
{ a: 2 }];
How can I create, with lodash, a new array just like data but for which we added a new property b: 1 to each object that has the property a equal to 1?
The new array should be like this:
var newdata = [{ a: 1, b: 1 },
{ a: 1, b: 1 },
{ a: 2 },
{ a: 2 }];
I guess we could combine both _.assign and _.filer but I'm not sure how.
You can do this with lodash via either _.defaults or _.assign / _.assignIn / _.extend:
var data = [{ a: 1 },{ a: 1 },{ a: 2 },{ a: 2 }];
console.log(_.map(data, x => x.a==1 ? _.defaults(x, {b: 1}) : x))
console.log(_.map(data, x => x.a==1 ? _.assign(x, {b: 1}) : x))
console.log(_.map(data, x => x.a==1 ? _.assignIn(x, {b: 1}) : x))
console.log(_.map(data, x => x.a==1 ? _.extend(x, {b: 1}) : x))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
You could map the array and use a new property if the condition is true.
var data = [{ a: 1 }, { a: 1 }, { a: 2 }, { a: 2 }],
newData = data.map(o => Object.assign({}, o, o.a === 1 && { b: 2 }));
console.log(newData);
.as-console-wrapper { max-height: 100% !important; top: 0; }
If you're happy with vanilla Javascript, this here works:
var data = [{ a: 1 },
{ a: 1 },
{ a: 2 },
{ a: 2 }];
var newData = [];
newData = data.reduce((acc, el) => {
return el.a === 1 ? acc.concat({a: el.a, b: 1}) : acc.concat(el);
}, []);
console.log(newData);
// expected output: [{a: 1, b: 1},
// {a: 1, b: 1},
// {a: 2},
// {a: 2}]
You can generate a function with lodash by applying _.cond() to _.map() with _.partialRight.
Use _.matches() to detect if the object has a: 1 property, and _.assign() { b: 1 } if it does.
When a is not 1, use _.stubTrue() to always return the original object via _.identity():
var func = _.partialRight(_.map, _.cond([
[_.matches({ 'a': 1 }), o => _.assign({}, o, { b: 2 })],
[_.stubTrue, _.identity]
]));
var data = [{ a: 1 },{ a: 1 },{ a: 2 },{ a: 2 }];
const result = func(data);
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Categories

Resources