Return object from forEach? - javascript

Is it possible to construct an object from the return of a forEach? How I'm doing:
const data = {}
object.rules.forEach(rule => {
data[rule.name] = { body: [], type: rule.type }
})
How I would like to do:
const data = object.rules.forEach(rule => {
data[rule.name] = { body: [], type: rule.type }
})

Consider using Array.reduce
const data = object.rules.reduce((obj, rule) => {
obj[rule.name] = { body: [], type: rule.type }
return obj;
}, {})
and shorter version
const data = object.rules.reduce((obj, rule) => Object.assign({}, obj, {[rule.name]:{ body: [], type: rule.type } }), {})

Whenever you want to convert an array into another structure that isn't an array, reduction is your friend.
console.log(
['a', 'b', 'c'].reduce((obj, char, index) => {
obj[char] = index;
return obj;
}, {})
)

No you can't use forEach for this purpose. Calling forEach on an array object applies the callback function you supply to forEach at each element in the array object.
You could use reduce for this purpose, which
applies a function against an accumulator and each element in the
array (from left to right) to reduce it to a single value
const data = object.rules.reduce(function(obj, rule) {
obj[rule.name] = { body: [], type: rule.type }
return obj;
}, {});
For a detailed explanation about this method please have a look here.

You could use Object.assign with a spread syntax ... and Array#map for single objects.
const data = Object.assign(...object.rules.map(
rule => ({ [rule.name]: { body: [], type: rule.type } }))
);
with destructuring assignment for name and type and short hand property
const data = Object.assign(...object.rules.map(
({ name, type }) => ({ [name]: { body: [], type } }))
);

Related

How can I store previous values instead of storing the value in array of objects in react state

I am storing the prev values in an array of objects, for example [{ActFollow: 'BlN'},{ActSendGift: 'BlY'},{ActSubscribe: 'BlY'}] I want to store the key and values in an object like this {ActFollow: 'BlN',ActSendGift: 'BlY', ActSubscribe: 'BlY'}
const [activityTypes, setActivityTypes] = useState<any>([]); // state
.then((response: any) => {
setActivityTypes((oldArray: any) => [
...oldArray,
{[item.channelSettingTypeId]: response.settingValue},
]);
});
How about this, if the nesting is only one level deep
const data = [{ActFollow: 'BlN',ActSendGift: 'BlY', ActSubscribe: 'BlY'}]
console.log([{...data[0],"hey" : "world"}])
const items = [{ActFollow: 'BlN'},{ActSendGift: 'BlY'},{ActSubscribe: 'BlY'}]
let object = {}
items.forEach(item=>{
for (const [key, value] of Object.entries(item)) {
object = {
...object,
[key]: value
}
}
})
console.log(object)
You can use this simple idea in React also. Just hold on the default empty object in state and update the object.
You can reduce the array of objects into an object.
You can do it by spreading (...) the current object into the resultant object, as shown below:
const
arrOfObjs = [{ ActFollow: "BlN" }, { ActSendGift: "BlY" }, { ActSubscribe: "BlY" }],
obj = arrOfObjs.reduce((res, o) => ({ ...res, ...o }), {});
console.log(obj);
You can also do it using Object.assign, as shown below:
const
arrOfObjs = [{ ActFollow: "BlN" }, { ActSendGift: "BlY" }, { ActSubscribe: "BlY" }],
obj = arrOfObjs.reduce((res, o) => Object.assign(res, o), {});
console.log(obj);
Use Spread Operator
const items = [{ActFollow: 'BlN', Anurag: 26},{ActSendGift: 'BlY'},{ActSubscribe: 'BlY'}]
let obj ={}
items.forEach((item) => {
obj = {
...obj,
...item
}
})
console.log(obj)

How to solve "Expected to return a value in arrow function" error in eslint

I am using eslint and getting this error.
Expected to return a value in arrow function
The error is showing on the third line of the code.
useEffect(() => {
let initialPrices = {};
data.map(({ category, options }) => {
initialPrices = {
...initialPrices,
[category]: options[0].price,
};
});
setSelectedPrice(initialPrices);
}, []);
The map function must return a value. If you want to create a new object based on an array you should use the reduce function instead.
const reducer = (accumulator, { category, options }) => (
{...accumulator, [category]:options[0].price}
)
const modifiedData = data.reduce(reducer)
More information https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
The map function is intended to be used when you want to apply some function over every element of the calling array. I think here it's better to use a forEach:
useEffect(() => {
let initialPrices = {};
data.forEach(({ category, options }) => {
initialPrices = {
...initialPrices,
[category]: options[0].price,
};
});
setSelectedPrice(initialPrices);
}, []);
Your map function should return something. Here it's not the case so the error happens. Maybe a reduce function will be more appropriate than map?
From what I can see in your case, is that you want to populate initialPrices, and after that to pass it setSelectedPrice. The map method is not a solution, for you in this case, because this method returns an array.
A safe bet in your case would a for in loop, a forEach, or a reduce function.
const data = [
{
category: "ball",
options: [
{
price: "120.45"
}
]
},
{
category: "t-shirt",
options: [
{
price: "12.45"
}
]
}
];
The forEach example:
let initialPrices = {};
// category and options are destructured from the first parameter of the method
data.forEach(({ category, options}) => {
initialPrices[category] = options[0].price;
});
// in this process I'm using the Clojure concept to add dynamically the properties
setSelectedPrice(initialPrices);
The reduce example:
const initialPrices = Object.values(data).reduce((accumulatorObj, { category, options}) => {
accumulatorObj[category] = options[0].price
return accumulatorObj;
}, {});
setSelectedPrice(initialPrices);

How to clone new array of objects by selecting particular properties from another?

So,
I am receiving the data that has the following information:
{
"data":[
{
"vote_count":22222,
"id":299537,
"ready":false,
},
{
"vote_count":2850,
"id":299534,
"ready":true,
},
]
}
Now I need to make a new object that would contain the same structure but with some properties, ie:
{
"data": [
{
"ready":false,
},
{
"ready":true,
}
]
}
I need the solution that is scalable, imagine having a set of data with 50 properties for example. Also, I did find solutions with objects, but never with array of objects.
Thanks guys, I've been busting my head for three hours now.
You could use destrcuturing and shorthand property names to create new objects like this:
const input={"data":[{"vote_count":22222,"id":299537,"ready":false,},{"vote_count":2850,"id":299534,"ready":true,},]}
const data = input.data.map(({ ready }) => ({ ready }))
console.log({ data })
If you want to get a bunch of properties, you could create an array of properties you need. Then use Object.assign() or reduce to create a subset of each object like this:
const input={"data":[{"vote_count":22222,"id":299537,"ready":false,},{"vote_count":2850,"id":299534,"ready":true,},]}
const properties = ["vote_count", "ready"]
const data = input.data.map(a =>
Object.assign({}, ...properties.map(p => ({ [p]: a[p] })))
)
/* You could also use reduce like this:
input.data.map(a => properties.reduce((r, p) => ({ ...r, [p]: a[p] }), {}))
*/
console.log({ data })
Map the properties you want
var obj1 = {
"data":[
{
"vote_count":22222,
"id":299537,
"ready":false,
},
{
"vote_count":2850,
"id":299534,
"ready":true,
},
]
}
var obj2 = {}
obj2.date = obj1.data.map(data => ({ ready: data.ready}));
console.log(obj2)
You can do it using Array#map method and Array#reduce method
const input = {
"data": [{
"vote_count": 22222,
"id": 299537,
"ready": false,
},
{
"vote_count": 2850,
"id": 299534,
"ready": true,
},
]
}
const extract = ['ready']
const data = input.data.map(o => extract.reduce((obj, k) => (obj[k] = o[k], obj), {}))
console.log({ data })

Return object with default values from array in Javascript

const fields = ['email', 'password'];
const objFields = {};
fields.forEach(value => {
objFields[value] = '';
});
console.log(objFields);
// Outputs {email: "", password: ""}
I want to achieve the same result but without having to initialize an empty object.
Actually my case is that I want to set initial state of a React component.
class App extends Component {
fields = ['email', 'password'];
state = {
fields: // the one liner code here that should return the object created from fields array,
};
...
expected result would be
// state = {fields: {email: "", password: ""}}
Whenever you're looking for reducing an array of values to one value, you're looking for .reduce()
state = {
fields: fields.reduce((acc, key) => ({...acc, [key]: ''}), {}),
};
You could map objects and assign all to a single object.
const
fields = ['email', 'password'],
object = Object.assign({}, ...fields.map(key => ({ [key]: '' })));
console.log(object);
In modern browsers, or by using polyfills, you can use Object.fromEntries() to create an object from an array, using the array's values as keys/properties, and fill the object's values with a default.
const fields = ['email', 'password'];
const result = Object.fromEntries(fields.map(value => [value, '']));
The result is {email: "", password: ""}.
You need to transform your array which contains keys into a real object.
To do it you have many possibilites, but you still have to do something, there is no magical trick.
My favorite soluce is to use a function to insert into your Utilitary class. So it's easy to read and re-usable.
number 1 : The function
function initializeKeys(keys, initialValue, object) {
return keys.reduce((tmp, x) => {
tmp[x] = initialValue;
return tmp;
}, object);
}
const objFields = initializeKeys(['email', 'password'], '', {
otherKey: 'a',
});
console.log(objFields);
number 2 : The forEach
const fields = ['email', 'password'];
const objFields = {};
fields.forEach(value => {
objFields[value] = '';
});
console.log(objFields);
number 3 : The reduce
const fields = ['email', 'password'];
const objFields = {
...fields.reduce((tmp, x) => {
tmp[x] = '';
return tmp;
}, {}),
};
console.log(objFields);

pick and omit in one function (lodash) in Redux action object

Basically what I need is to get "items" from json and re-assign it, and leave other keys untouched:
The first approach duplicates data.
The second seems to be bad in terms of performance.
And the third is hard to read and understand.
I use lodash. But if it can't be done in a clever fashion, you can suggest me a different library.
function a(name, json) {
return {
type: RECEIVE_DATA,
name,
items: _.get(json, 'data.items', []),
receivedAt: Date.now(),
...json,
};
}
function b(name, json) {
return {
..._.omit(json, 'data'),
type: RECEIVE_DATA,
name,
items: _.get(json, 'data.items', []),
receivedAt: Date.now(),
}
}
function c(name, json) {
return {
..._.transform(json, (result, value, key) =>{
if (key === 'data') {
result['items'] = value['items'];
} else {
result[key] = value;
}
}, {}),
type: RECEIVE_DATA,
name,
receivedAt: Date.now(),
}
}
Use parameters destructuring to get items, and rest properties to collect the rest of the params:
const json = { another: [], data: { items: [1] } };
function a(name, { data, data: { items = [] }, ...jsonRest } = {}) {
return {
type: 'RECEIVE_DATA',
name,
items,
receivedAt: Date.now(),
...jsonRest
};
}
console.log(a('name', json));
You can also shorten the action creator a bit by using an arrow function:
const a = (name, { data, data: { items = [] }, ...jsonRest } = {}) => ({
type: RECEIVE_DATA,
name,
items,
receivedAt: Date.now(),
...jsonRest
});
If you don't mind having a couple more lines in your function, you could easily just grab the data from that key then delete it:
function a(name, json = {}) {
const { items = [] } = json.data;
delete json.data;
return {
type: RECEIVE_DATA,
name,
items,
receivedAt: Date.now(),
...json,
};
}

Categories