This question already has answers here:
Add a property to a JavaScript object using a variable as the name? [duplicate]
(14 answers)
Closed 2 years ago.
I feel like my problem is really easy to solve, but I cannot see it. I have simple thing to do, get myObject from another function and store this in my storage object. For this task I created storageHandler function. Everything works fine, but Object.assign is not reaching my 'ID' that I declared in this function earlier. This is weird because I don't know how to tell my function that 'ID' is variable, not a string. I just expect it to be {1212313: {...}} but instead it gives me {ID: {...}}.
Someone have any idea how to fix it?
let storage = {}
const myObject = {
ID: '1223424525221',
name: 'Thomas',
mail: 'example#example.com'
}
storageHandler = data => {
const {ID} = data;
Object.assign(storage, {ID: data})
console.log(storage)
}
storageHandler(myObject)
That's because in javascript this
a = { b: 1 };
is the same as
a = { "b": 1 };
You should change the Object.assign() for something like this
storage[ID] = data;
You should use the value of ID as key of object using [].
Object.assign(storage, {[ID]: data})
You are using string as a property name. Use computed property name like [ID] instead of ID. Computed property allows you to have an expression be computed as a property name on an object.
let storage = {};
const myObject = {
ID: '1223424525221',
name: 'Thomas',
mail: 'example#example.com',
};
storageHandler = (data) => {
const { ID } = data;
Object.assign(storage, { [ID]: data });
console.log(storage);
};
storageHandler(myObject);
Related
This question already has answers here:
One-liner to take some properties from object in ES 6
(12 answers)
Closed 1 year ago.
I have an object adData and I need to extract some of it's properties, add some more properties to the extracted object and pass the object as parameter. I can do this using:
const params = {};
params.id = adData.id;
params.status = adData.status;
params.frequency = adData.frequency;
params.user = getLoggedInUser();
callAnotherFunction(params)
Can I do the destructing and reassigning to new object in one line ? Something like:
const params = {id, status, frequency} = adData;
params.user = getLoggedInUser();
Or
const params = {id, status, frequency, getLoggedInUser(): user} = adData;
Now these both above syntaxes are wrong but is there any other way to do it using destructuring and without extracting the properties one by one
If you know what properties the object does have, and there aren't that many, you can list them and use rest syntax to gather the others into an object:
const { unwantedProp, ...params) = adData;
// use params
Otherwise, there isn't any incredibly simple syntax for what you want, though you could
const params = Object.fromEntries(
Object.entries(adData).filter(([key]) =>
['id', 'status', 'frequency'].includes(key)
)
);
We can do in one line with destructuring and arrow function.
const getLoggedInUser = () => "foo";
const adData = {
id: 123,
status: "active",
frequency: "less",
bar: 4,
};
const params = (({ id, status, frequency }, user = getLoggedInUser()) => ({
id,
status,
frequency,
user,
}))(adData);
console.log({ params });
This question already has an answer here:
ES6 deep nested object destructuring
(1 answer)
Closed 1 year ago.
I have an Apollo query:
const { error, loading, data: user } = useQuery(resolvers.queries.ReturnUser, {
variables: { userId: parseInt(id) },
});
The data object returned from the query has another object called returnUser. So the actual object is:
data: {
returnUser: {
name: 'Some Name'
}
}
In my JSX I want to output the data:
return (
<div>
{ user ?
<p>Profile {user.returnUser.name}</p> :
<div>User not found</div> }
</div>
);
As you can see I need to access the returnUser object on the user object to get the actual user data. This is not great. Is there any way to destructure the data object from the useQuery so I can assign the nested object to user?
//edit: While this looks like a duplicate question, the answer is different due to the async nature of useQuery. If you don't set a default value you'll get an error.
Got the answer thanks to #Pilchard:
const {error, loading, data: {returnUser: user} = {}} = useQuery(resolvers.queries.ReturnUser, {
variables: {userId: parseInt(id)},
});
You can follow the same nesting while deconstructing the data.
e.g.
const data = {
anotherLevel: {
returnUser: {
name: 'Some Name'
}
}
}
const { anotherLevel: {returnUser: { name }}} = data;
console.log(name); // prints Some Name
This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 1 year ago.
I was calling a function and pass array of objects as first argument and second argument was object property of first argument but I don't know why map func doesn't accepting second argument property
Here code plz see it once
const myfunc = (arrObj, property) => {
const arr1 = arrObj.map(item => {
return item.property
}
return arr1:
}
const arrObj = [{
title: 'book',
body: 'hello'
},
{
title: 'cup',
body: 'hii'
}
];
// Func call
console.log(myfunc(arrObj, 'title'));
Use lowercase for const, return, console.
Return a value (an array, in this case) from your function that you can log.
Use item[property] to access the title property. There is no "property" key in those objects.
Make sure you close all of your parentheses.
function myfunc(arrObj, property) {
return arrObj.map(item => item[property]);
}
const arrObj=[{title:"book",body:"hello"},{title:"cup",body:"hii"}];
console.log(myfunc(arrObj, 'title'));
There are multiple errors in your code. First keywords like return,const,console are all case sensative. Secondly you are not returning from the function. Third since property is a variable you have to use square braces instead of dot
const myfunc = (arrObj, property) => {
return arrObj.map(item => {
return item[property]
})
}
const arrObj = [{
title: 'book',
body: 'hello'
},
{
title: 'cup',
body: 'hii'
}
];
// Func call
console.log(myfunc(arrObj, 'title'));
I want to set multiple objects as multiple values of another object. So for example
let dataObj ={}
const personData = {name:"sai",age:"20"}
const ids = {id1:"1231455",id2:"425325232"}
dataObj.personData = personData;
dataObj.ids = ids
console.log(dataObj);
'personData' is a object and 'ids' is a object.Im setting these 2 objects as 2 values for 'dataObj'.
I was wondering is there a shorter way to achieve this like:
let dataObj ={}
const personData = {name:"sai",age:"20"}
const ids = {id1:"1231455",id2:"425325232"}
dataObj = personData;
dataObj = ids
console.log(dataObj);
The problem with the alternative I suggested is that it wont set 'key' of 'dataObj' object.It will just set the values of 'personData' and 'ids' to the value of dataObj.Is there any way I can achieve this ? Specifying multiple objects as values to another object with keys?
You can achieve this using the spread syntax:
let dataObj = {};
const personData = {name:"sai",age:"20"}
const ids = {id1:"1231455",id2:"425325232"}
dataObj = { ...dataObj, personData, ids };
console.log(dataObj);
/*
output :
value of dataObj:
{
personData: {
name: "sai",
age" "20"
},
ids: {
id1: "1231455",
id2: "425325232"
}
}
*/
I'll try and explain spread using the above example. First we start with an empty object dataObj: {}. We want to add new properties to that object: personData with the personData object as value and ids with the ids object as value.
ES2015 added a shorthand syntax for setting property definitions in objects. That's what been used here:
dataObj = { personData, ids };
This is simply a cleaner way of writing
dataObj = {
personData: personData,
ids: ids
};
More info on this can be found on MDN.
Because you want to initialise your object before, we can't simply overwrite the object, but we need to add the new properties to the existing object. This can be done using the spread syntax.
const oldObject = { key: 'value', anotherKey: 'another value' };
let newObject = { ...oldObject };
// newObject value: { key: 'value', anotherKey: 'another value' };
The oldObject was 'spreaded' in newObject. Resulting it in having the same key-value pairs as oldObject.
In your code example we assign a new object to dataObj. In that new object we spread all properties which are in the current dataObj: { ...dataObj and then add the new properties: , personData, ids }.
I hope this explanation is clear, feel free to ask for more info. The spread syntax is very powerful and can be used for a lot of things. So be sure to read up on that.
You can merge two objects as below. You can use '...' spread object. the spread object works for objects as well. Clone an object as shown in below code. for more information please visit https://flaviocopes.com/javascript-spread-operator/
let dataObj = {}
const personData = { name: "sai", age: "20" }
const ids = { id1: "1231455", id2: "425325232" }
dataObj = { ...dataObj, personData, ids }
console.log(dataObj);
This question already has answers here:
Creating object with dynamic keys [duplicate]
(2 answers)
Closed 5 years ago.
const cars = [
{
'id': 'truck',
'defaultCategory': 'vehicle'
}
]
const output = []
Object.keys(cars).map((car) => {
output.push({
foo: cars[car].defaultCategory
})
})
console.log(output)
This work fine, however what I want to achieve is so that the newly crated object has structure of 'truck': 'vehicle'.
So if I replace push argument with
${cars[car].id}`: cars[car].defaultCategory
I get SyntaxError: Unexpected template string
What am I doing wrong?
Use map on the array, and not the keys (the indexes) to get an array of objects. For each object use computed property names to set the id value as the key:
const cars = [
{
'id': 'truck',
'defaultCategory': 'vehicle'
}
];
const result = cars.map(({ id, defaultCategory }) => ({ [id]: defaultCategory }));
console.log(result);
You should use .map() over your cars array and not Object.keys(cars):, we don't use Object.keys() with arrays.
This is how should be your code:
var output = cars.map(function(car) {
return {
[car.id]: car.defaultCategory
};
});
var cars = [{
'id': 'truck',
'defaultCategory': 'vehicle'
}];
var output = cars.map(function(car) {
return {
[car.id]: car.defaultCategory
};
});
console.log(output);