This question already has answers here:
Remove blank attributes from an Object in Javascript
(53 answers)
Closed 2 years ago.
Is there a better way to accomplish this in Javascript?
const data: any = {};
if (values.email) data.email = values.email;
if (values.password) data.password = values.password;
if (values.username) data.username = values.username;
I don't want the data object to have the properties for the undefined or falsy values.
You could put the potential properties in an array and then .filter() out any which values[prop] has a fasly value for. Then you can .map() each key to an array of [key, value] pairs, and use Object.fromEntries() to build the data object for you:
const values = {
email: 'abc',
username: 'xyz'
};
const props = ['email', 'password', 'username'];
const data = Object.fromEntries(
props.filter(prop => values[prop]).map(prop => [prop, values[prop]])
);
console.log(data);
If you can't support Object.fromEntries(), you could consider using Object.assign(), and then mapping to an array of objects which you then spread into Object.assign():
const values = {
email: 'abc',
username: 'xyz'
};
const props = ['email', 'password', 'username'];
const data = Object.assign({},
...props.filter(prop => values[prop]).map(prop => ({[prop]: values[prop]}))
);
console.log(data);
You can do something along these lines:
const obj1 = {
prop1: true,
prop2: false,
prop3: 4,
}
const obj2 = Object.entries(obj1).reduce((result, [key, value]) => {
if (value) {
result[key] = value
}
return result
}, {})
console.log(obj2)
This simple function will do it, if you want to copy over all properties that don't have a false-y value. If you only want a fixed list, look at the answer from Nick Parsons.
const copyNonNil = (obj) =>
Object .fromEntries (Object .entries (obj) .filter(([k, v]) => v))
const values = {
email: 'foo#bar.baz',
username: 'foobar',
password: '',
another: false
}
console .log (copyNonNil (values))
It's easy to shim Object .fromEntries if you don't have it available. See the answer from theDude, which uses a reduce that serves in the same role.
You could use Object.entries to iterate over the properties of values and perform the true/false check in that to make this more flexible:
for(const [key, value] of Object.entries(values)){
if(values[key]) data[key] = value;
}
This would give you only the truthy values in data for a values object of any size.
Related
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)
I have an object like this
{
metadata: {
correlationId: 'b24e9f21-6977-4553-abc7-416f8ed2da2d',
createdDateTime: '2021-06-15T16:46:24.247Z'
}
}
and I have an array of the properties I wanna access
[metadata, correlationId]
how can I dynamically access the property on the object?
like
keys.forEach((key) => {
object[key][key2] ???
})
it needs to be dynamic since I don't know how deep we need to access the object
Here is a solution without recursion:
const myObj = {
a: {
b: {
c: "I'm the target"
}
}
}
const keys = ['a', 'b', 'c'];
let result = myObj;
for (const key of keys) {
result = result[key];
}
console.log(result);
Or with recursion:
const finder = (obj, keys, index = 0) => {
const result = obj[keys[index++]];
if (!result) {
return obj;
}
return finder(result, keys, index);
}
console.log(finder(myObj, keys));
This is pretty similar to Accessing nested JavaScript objects and arrays by string path, except with one fewer step - you already have the keys you need in the form of an array. .reduce and access the next nested value in each iteration.
const obj = {
metadata: {
correlationId: 'b24e9f21-6977-4553-abc7-416f8ed2da2d',
createdDateTime: '2021-06-15T16:46:24.247Z'
}
};
const keys = ['metadata', 'correlationId'];
const result = keys.reduce((a, key) => a[key], obj);
console.log(result);
This is my idea to solve your problem. Tell me, if is ok for you.
let x = {
metadata: {
correlationId: 'b24e9f21-6977-4553-abc7-416f8ed2da2d',
createdDateTime: '2021-06-15T16:46:24.247Z'
}
}
let fun = x => typeof x === 'string' ? console.log(x) : Object.keys(x).map( y => fun(x[y]));
fun(x);
I receive an object that looks like this:
this.tokensData = {
O: {
id: 0,
name: value1,
organization: organization1,
...,
},
1: {
id: 1,
name: value1,
organization: organization1,
...,
},
2: {
id: 2,
name: value2,
organization: organization2,
...,
},
...
}
I want to filter by id and remove the Object which id matches the id I receive from the store. What I tried so far:
const filteredObject = Object.keys(this.tokensData).map((token) => {
if (this.$store.state.id !== this.tokensData[token].id) {
return this.tokensData[token];
}
});
This replaces the Object with undefined - which would work for my purposes but is obviously not ideal.
Any help is much appreciated!
Try to use Object.entries and then Object.fromEntries() to create an object from a list of key-value pairs:
let store = [0 , 1];
const result = Object.entries(tokensData).filter(([k, v]) => !store.some(s => s == v.id));
console.log(Object.fromEntries(result));
An example:
let tokensData = {
O: {
id: 0,
name: '',
organization: '',
},
1: {
id: 1,
name: '',
organization: '',
},
2: {
id: 2,
name: '',
organization: '',
}
}
let store = [0 , 1];
const result = Object.entries(tokensData).filter(([k, v]) => !store.some(s => s == v.id));
console.log(Object.fromEntries(result));
You can do this by using Object.entries and Object.fromEntries:
const filteredObject = Object.fromEntries(
Object.entries(this.tokensData).filter(
([key, value]) => value.id !== this.$store.state.id
)
)
This can be done by cloning the object and removing the object at the ID:
const removeObjectByID = (obj, id) => {
// first create a copy of the object
const copy = JSON.parse(JSON.stringify(obj))
// next, delete the one entry you don't want
delete copy[id]
// finally, return the new object
return copy
}
// Test
const data = {a:1, b: 2, c: 3}
console.log(removeObjectByID(data, 'b')) // { a: 1, c: 3 }
The problem with undefined is caused by using this in your arrow function. Javascript scoping gives a different meaning to this if the function is a arrow function.
Furthermore I suggest to use filter.
.map is used to transform A -> B.
.filter should be used to filter out objects.
Now if we combine that this would become something like this.
function filterById(token) {
return this.$store.state.id !== this.tokensData[token].id;
}
function getTokenData(token) {
return this.tokensData[token]
}
const token = Object.keys(this.tokensData)
.filter(filterById)
.map(getTokenData);
});
Please note that I'm not using arrow functions. Arrow function can't refer to this due to the way javascript handles scoping.
An alternative approach could be to reference this into a variable, so your arrow function can access the variable.
const self = this;
const token = Object.keys(this.tokensData)
.filter(token => self.$store.state.id !== self.tokensData[token].id)
.map(token => self.tokensData[token]);
Too make it even nicer you could utilize Object.entries. This will return an array of key and value, which you can destructure using es6 syntax as following [key, value].
const self = this;
const token = Object.entries(this.tokensData)
.filter(([key, value]) => self.$store.state.id !== value.id)
.map(([key, value]) => value);
I need to add single quotes to all the values in an object that looks like this:
{name: "testUser", type: "regular"}
The object needs to look like the following:
{name: "'testUser'", type: "'regular'"}
I'm using Object.values to achieve this:
Object.values(targetObject).map(value => value = `'${value}'`)
Except it's not exactly updating targetObject. What would be the correct way to achieve this?
To update the original object, you'll need the key. Use Object.entries() to get the key and value, iterate with Array.forEach(), and each key with the new value:
const targetObject = {name: "testUser", type: "regular"}
Object.entries(targetObject) // get an array of [key, value] pairs
.forEach(([k, v]) => targetObject[k] = `'${v}'`) // update the original object keys
console.log(targetObject)
You can use Object.entries to iterate through all the entries in the object and update them:
const obj = {name: "testUser", type: "regular"};
for (let [key, value] of Object.entries(obj)) {
obj[key] = `'${value}'`;
}
console.log(obj);
You can you for..in to loop through properties of the object.
const obj = {name: "testUser", type: "regular"}
for (let k in obj){
obj[k] = `'${obj[k]}'`
}
console.log(obj)
You could map new objects and collect them to a single object.
var object = { name: "testUser", type: "regular" },
updated = Object.assign(...Object.entries(object).map(([k, v]) => ({ [k]: `'${v}'` })));
console.log(updated);
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);