I'm trying to quickly pull out ‘value’ property from some objects using destructuring.. is there a simple way to get it from this? I think it might be possible with some complicated destructuring thing i haven’t quite grocked.
I know I could use loops and such, but I'd like to make it a bit more elegant. I'm looking for a non-repetitive, ideally 1-2 line solution. I wanted to use a map, but that only works on an array...
formData = {
name: {val: 'myName', key: 'value', etc: 'more data'}
province: {val: 'myProvince', key: 'value', etc: 'more data'}
dateOfBirth: {val: 'myBDAY!', key: 'value', etc: 'more data'}
}
//desired outcome:
{
name: 'myName',
province: 'myProvince',
dateOfBirth: 'myBDAY!'
}
//attempt 1
let customer = { name, province, dateOfBirth} = formData; //hrm doesn't get me there
Destructuring is used to assign multiple variables from different elements of an array or object, that's not what you're doing. You can just do:
let customer = {
name: formData.name.val,
province: formData.province.val,
dateOfBirth: formData.dateOfBirth.val
}
If you don't want to list all the properties explicitly, just use a loop.
let customer = {};
for (var k of Object.keys(formData)) {
customer[k] = formData[k].val;
}
A hard to read one-liner would be:
let customer = Object.keys(formData).reduce(
(acc, key) => Object.assign(acc, {[key]: formData[key].val}), {});
to grab .val off every value in the object, and return a new object with the same keys.
That's basically the equivalent of:
let customers = {};
for (const key of Object.keys(formData)) customers[key] = formData[key].val;
Since you didn't like Barmar's answer, you can use a combination of Object.keys and the resulting array's reduce method:
let customer = Object.keys(formData).reduce(function(acc, key) {
acc[key] = formData[key].val;
return acc;
}, {});
You said you wanted to use destructuring… so let's do that:
let customer = {};
for (let k in formData) ({[k]: {val: customer[k]}} = formData);
But really, avoid that, and use clear and readable property assignment instead :-)
Related
I am receiving a json response from an API call. I need to store its keys, and create an array of an object. I am intending to this array of an object is created dynamically no matter the keys of the response.
I've already got the keys like this:
const json_getAllKeys = data => {
const keys = data.reduce((keys, obj) => (
keys.concat(Object.keys(obj).filter(key => (
keys.indexOf(key) === -1))
)
), [])
return keys
}
That returned an array (using a sample json):
['name','username', 'email']
But I am trying to use that array to create an array of object that looks like this one
[
{
name: "name",
username: "username",
email: "Email",
}
];
I've been trying mapping the array, but got multiple objects because of the loop, and I need a single one to make it work.
keys.map(i=>({i:i}))
[
{ i: 'id' },
{ i: 'name' },
{ i: 'username' },
{ i: 'email' }
]
Any hint would be useful!
Thanks in advance :D
What you're looking for is Object.fromEntries, which is ECMA2019, I believe, so available in Node >=14 and will be provided as a polyfill if you employ babel.
I can't quite discern what your reduce should produce, but given the sample input, I would write
const input = ['name','username', 'email'];
const result = Object.fromEntries(input.map(name => ([name, name])));
// result == { name: 'name', username: 'username', email: 'email' }
You're definitely on the right track. One thing to remember is the map function will return the SAME number of output as input. So in your example, an array of 3 returns an array of 3 items.
For this reason, map alone is not going to give you what you want. You may be able to map => reduce it. However, here is a way using forEach instead. This isn't a strictly functional programming style solution, but is pretty straight forward and depending on use case, probably good enough.
let keys = ['name','username', 'email'] //you have this array
const obj = {}; // empty object to hold result
keys.forEach(i => {
obj[i] = i; // set the object as you want
})
console.log(obj); // log out the mutated object
// { name: 'name', username: 'username', email: 'email' }
I have an array of TypeScript objects with shape that is essentially the following:
interface MyObject {
id: string
position: number
}
I am trying to convert this array into a map of id to position that looks like this for a JSON POST down the line:
{
"id1": 1,
"id2": 2,
}
One approach is to use an ES6 Map:
array.reduce((map, obj) => map.set(obj.id, obj.position), new Map())
That works, but converting an ES6 Map to JSON is problematic.
I have tried to accumulate the key-value pairs into a pure object literal, but TypeScript has been hating everything I try, which includes Indexable Types, Object.create({}), and a lot of other ideas.
How can I distill a pure object literal of key value pairs from an array of objects?
If your target environment supports ES2019, you could use Object.fromEntries(), like this:
function arrToObjES2019(arr: MyObject[]) {
return Object.fromEntries(arr.map(({ id, position }) => [id, position]));
}
Or, if not, you can make your own polyfill-like version of Object.fromEntries() using array reduce() on an empty object, like this:
function fromEntries<V>(iterable: Iterable<[string, V]>) {
return [...iterable].reduce((obj, [key, val]) => {
obj[key] = val
return obj
}, {} as {[k: string]: V})
}
and then use it:
function arrToObj(arr: MyObject[]) {
return fromEntries(arr.map(({ id, position }) => [id, position]));
}
Either way should let you do what you want:
const arr: MyObject[] = [
{ id: "id1", position: 1 },
{ id: "id2", position: 2 }
];
console.log(JSON.stringify(arrToObj(arr))); // {"id1":1,"id2":2}
Okay, hope that helps. Good luck!
Link to code
I'm not sure why reduce wouldn't be the approach here...
array.reduce((acc, val) =>
Object.assign(acc, {[val.id]: val.position}), {});
Just do this, it is the simplest way:
let newMap = new Map(array.map(obj => [obj.id, obj.position]));
I'm trying to take an array like so:
location: [
{Id: "000-000", Name: "Foo"},
{Id: "000-001", Name: "Bar"},
..etc
]
What's the most efficient/cleanest way to pull out the Ids and combine them into a single string while also appending in front of each value a static string ("&myId=")?
More succinctly, what's the most efficient way to turn the above array into the following end-result:
&myId=000-000&myId=000-001
As stated in the title, ES6 is acceptable to use if it offers the best method for accomplishing this.
Use reduce, extracting each Id:
const location2 = [{Id: "000-000", Name: "Foo"}, {Id: "000-001", Name: "Bar"}];
console.log(
location2.reduce((a, { Id }) => `${a}&myId=${Id}`, '')
);
While this is pretty clean and only requires iterating over each item once, in terms of efficiency, for loops are still more performant if you have a huge number of items in the array:
const location2 = [{Id: "000-000", Name: "Foo"}, {Id: "000-001", Name: "Bar"}];
let output = '';
for (let i = 0, { length } = location2; i < length; i++) {
output += '&myId=' + location2[i].Id;
}
console.log(output);
In this particular case, it looks like you’re trying to concatenate URL parameters.
You can iterate over the location array and use the appropriate set of APIs for this: URLSearchParams and URL.
In particular, you’re looking for the append method, which allows mapping multiple value to the same key.
const params = new URLSearchParams(),
locationArray = [
{
Id: "000-000",
Name: "Foo"
},
{
Id: "000-001",
Name: "Bar"
}
];
locationArray.forEach(({ Id }) => params.append("myId", Id));
console.log("Result as a string:", String(params));
console.log(`Explicitly calling \`String\` is usually not needed, since ${params} can just be interpolated, concatenated, or coerced to a String like this.`);
console.log("Result inside a URL:", String(Object.assign(new URL(location), { search: params })));
console.log("Result as a URLSearchParams object (look in the browser console (F12) for better formatting):", params);
But in general, using map and join seems efficient enough.
const staticString = "&myId=",
locationArray = [
{
Id: "000-000",
Name: "Foo"
},
{
Id: "000-001",
Name: "Bar"
}
],
result = locationArray.map(({ Id }) => staticString + Id).join("");
// Or:
// result = staticString + locationArray.map(({ Id }) => Id).join(staticString);
console.log(result);
In the alternative, the first staticString may also be changed to "?myId=", since this looks like query parameters.
But it’s important to use the URLSearchParams API if you’re actually using URL parameters, so that the data is correctly encoded.
Try both approaches with one of the Ids having the value "1&myId=2" and you’ll quickly notice the benefit of the URLSearchParams API.
This API also needs to be used to decode everything again.
Try to avoid using any library as I just need a simple script. I want to get non existing record from existing array.
input = [{name: 'james'}, {name: 'jane'}]
existing = [{name: 'james'}]
//do something
expected input to become
[{name: 'jane'}]
I tried this
let input = [{
name: 'yahoo.com',
},{
name: 'google.my',
}]
existing = (existing || []).map(o => ({name: o.name})) //clean up data from backend [{name:'google.my'}]
input = (input || []).map(o => o.name) //just in case input has more property in the future
input = existing.filter(o => !o.name.includes(input))
console.log(input)
Somehow I still don't get what I want (expect input to be [{name: 'yahoo.com'}], what is missing? I couldn't spot it.
You could filter with a lookup with find.
var input = [{ name: 'james' }, { name: 'jane' }],
existing = [{ name: 'james' }],
result = input.filter(({ name }) => !existing.find(o => o.name === name));
console.log(result);
Array.prototype.filter, Array.prototype.map, and Set can be combined using a closure to detect missing elements between arrays of objects using keys.
See below for a practical example.
// Input.
const input = [{name: 'james'}, {name: 'jane'}]
// Existing.
const existing = [{name: 'james'}]
// Missing (B elements from A).
const missing = (A, B) => (s => A.filter(({name}) => !s.has(name)))(new Set(B.map(({name}) => name)))
// Output.
const output = missing(input, existing)
// Proof.
console.log(output)
You can use filter and find
let input = [{name: 'james'}, {name: 'jane'}];
let existing = [{name: 'james'}];
let result = input.filter(v => !existing.find(o => o.name == v.name));
console.log(result);
You can use a combination of two Array#filter.
The first one is looping through your input array, while the second one loops through your existing array to check if each input value is contained inside existing.
let input = [{name: 'james'}, {name: 'jane'}];
let existing = [{name: 'james'}];
let res = input.filter(a => !existing.filter(b => b.name == a.name).length);
console.log(res);
First, don't reuse variable names, it's confusing (you have two separate things called input.
Second, don't do unnecessary loops. Do a filter right out of the gate and then map to get an array of names (or skip the map altogether if you don't really need it)
let input = [
{
name: 'yahoo.com'
},
{
name: 'google.my'
}
]
//all names in existing that are also in input
(existing || [])
//I used some instead of includes
.filter(o => !(input || []).some(i => i.name == o.name))
.map(o => o.name);
MDN Array.prototype.some
In JavaScript you have the nice .filter method to remove null or falsy values from arrays. So far I haven't been able to find a method to remove the same from JavaScript Objects.
Why would this be?
Currently you can create a function for arrays like :
function stripNulls(arr) {
return arr.filter(Boolean);
}
Is there a similar function that can be created for JS Objects, or is the way filter works not practical on JS Objects.
The answer to "can I do x to an object" (or an array for that matter) is usually "yes" and it frequently involves some form of reduce.
If you want to filter falsy values you could do something like this:
function filterFalsy(obj) {
return Object.keys(obj).reduce((acc, key) => {
if (obj[key]) {
acc[key] = obj[key]
}
return acc
}, {})
}
const testObj = {
a: 'test',
b: 321,
c: false
}
console.log(filterFalsy(testObj))
This returns a new object without falsy values and leaves the existing object alone.
WARNING: There are better answers provided here. Also, thanks to comments made below user's should be warned using delete may provide suboptimal performance.
Filtering invalid values is a little more complex in objects. At face value this will do what you want:
var arr = [ 'apple', 43, false ];
var trueArr = arr.filter(Boolean);
console.log(trueArr);
var obj = { 'title': 'apple', 'id': 43, 'isOrange': false, 'test': 'asd' };
Object.keys(obj)
.filter(key => !obj[key])
.forEach(key => delete obj[key]);
console.log(obj);
However, this will not iterate over child objects / functions. This logic also directly modifies the original object (which may or may not be desired).
That can easily changed by adding this logic to a function like so:
function removeFalseyProperties(obj) {
Object.keys(obj)
.filter(key => !obj[key])
.forEach(key => delete obj[key]);
return obj;
}
var testObj = { 'title': 'apple', 'id': 43, 'isOrange': false, 'test': 'asd' };
var trutheyObj = removeFalseyProperties(testObj);
console.log(trutheyObj);
falsy values are 0, undefined, null, false, etc.
myArray
.map(item => {
// ...
})
// Get rid of bad values
.filter(Boolean);
By passing Boolean we can remove all the falsy values.