How to get a subset of a Javascript object with nested properties?

Question

I'm developing with Angular and I have the following Typescript array of objects:

docs = [
    { 
        id: '1',
        type: {
            id: 1
            desc: 'Category 1',
        }
        title: 'Foo",
        date: '2018-06-21',
        attachments: [
            { id: 51, filename: 'foo.pdf', title: 'Foo' },
            { id: 20, filename: 'bar.doc', title: 'Bar' }
        ]
    },
    { 
        id: '2',
        type: {
            id: 2
            desc: 'Category 2',
        }
        title: 'Bar",
        date: '2018-06-21',
        attachments: [
            { id: 15, filename: 'foobar.xls', title: 'Foobar' },
            { id: 201, filename: 'example.doc', title: 'Example' }
        ]
    }
]

I need to get only a subset of the properties, something like this:

docs = [
    { 
        id: '1',
        type: {
            id: 1
            desc: 'Category 1',
        }
        attachments: [
            { id: 51 },
            { id: 20 }
        ]
    },
    { 
        id: '2',
        type: {
            id: 2
            desc: 'Category 2',
        }
        attachments: [
            { id: 15 },
            { id: 201 }
        ]
    }
]

How can I achieve this? Have I to create a parser or does exist any smart way (such as Lodash) to extract a lite version of the array?

I have already seen it, but I cannot figure out how to map multiple properties: map = array.map(_ => _.x) — smartmouse
– smartmouse, Commented Jun 21, 2018 at 14:42
Just const result = docs.map(({ id, type, attachments }) => ({id, type, attachments: attachments.map(a => a.id)})); — Aleksey L.
– Aleksey L., Commented Jun 21, 2018 at 14:53

Inus Saha · Accepted Answer · 2018-06-21 15:33:56Z

4

var docs = [{"id":"1","type":{"id":1,"desc":"Category 1"},"title":"Foo","date":"2018-06-21","attachments":[{"id":51,"filename":"foo.pdf","title":"Foo"},{"id":20,"filename":"bar.doc","title":"Bar"}]},{"id":"2","type":{"id":2,"desc":"Category 2"},"title":"Bar","date":"2018-06-21","attachments":[{"id":15,"filename":"foobar.xls","title":"Foobar"},{"id":201,"filename":"example.doc","title":"Example"}]}];

const result = docs.map(({id,type,attachments})=>{
    let doc={id,type};
    doc.attachments=attachments.map(({id})=>({id}));
    return doc;
});

console.log(result);

have a look at this. this works perfectly!

edited Jun 21, 2018 at 15:33

answered Jun 21, 2018 at 14:58

Inus Saha

1,93813 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smartmouse Over a year ago

Using the same mapping... what about if I would map only attachments with filename equals to example.doc?

Inus Saha Over a year ago

attachments.map(({id})=>({id})); needs to be replaced by attachments.filter(att=>att.filename=='example.doc').map(({id})=>({id})); but keep in mind now attachments may be empty if there is no match found.

Nova · Accepted Answer · 2018-06-21 14:50:09Z

1

You can use array.map and object destructuring to extract only the wanted properties.

Also use JSON.parse and JSON.stringify to make a copy and avoid side effetcs.

docs2 = JSON.parse(JSON.stringify(docs)).map(
({id, type, attachements}) => 
  ({ id, 
    type,
    attachements: attachements.map(({id}) => ({id})
  })
)

edited Jun 21, 2018 at 14:50

answered Jun 21, 2018 at 14:49

Nova

113 bronze badges

2 Comments

J. Pichardo Over a year ago

Why the JSON.stringify?

Nova Over a year ago

I used JSON.stringify to make a deep copy of the object. Otherwise, a change of a property like "type.id" for example in the original "docs" will also change "type.id" in the copy. Otherwise you would have to manually copy the properties of "type". Both are valid solutions.

Dimitri Lavrenük · Accepted Answer · 2018-06-21 15:19:02Z

1

You can use Array.map with object spreading, something like this:

const mapSubset = ({ id, type, attachments }) => {
    return { id, type, attachments: attachments.map( {id} => id ) };
};

const subset = docs.map( mapSubset );

edited Jun 21, 2018 at 15:19

answered Jun 21, 2018 at 14:50

Dimitri Lavrenük

4,9091 gold badge19 silver badges22 bronze badges

Comments

J. Pichardo · Accepted Answer · 2018-06-21 15:21:25Z

I was looking for a non-specific way to accomplish this or any other similar cases, so far I've thought of the following:

Have an IMapping<T> type, that defines the way to map each property.
Have an IMappingFunction<T> interface, that determines how to map a specific thing:

The following code demonstrates it:

type IMapping<T> = {
    [P in keyof T]: IMapping<T[P]> | IMappingFunction<T[P]>;
}

interface IMappingFunction<T>{
    (t: T): T | Partial<T>
}

class Person{
    name: string;
    lastName: string;
}

const obj: IMapping<Person> =  {
    name: s => s.toUpperCase(),
    lastName: s => s
}

function map<T>(obj: T, mapping: IMapping<T>) {
    return Object.keys(obj)
        .map(prop => { 
            const propMapping = mapping[prop];

            return {
                key: prop,
                value: typeof propMapping === 'function' ?
                    propMapping(obj[prop]) :
                    map(obj, propMapping)
            };
        })
        .reduce((acc, prop) => ({...acc, [prop.key]: prop.value}), { });
}

console.log(map({ name: 'Name', lastName: 'LastName'}, obj));

For a runnable snippet check here

Kevin Aud · Accepted Answer · 2018-06-21 14:44:52Z

-2

do you need to leave the original array intact? If not you can iterate through the list of objects using a for loop and use the 'delete' operator to delete the properties you no longer want.

For example:

var Employee = {
  firstname: "Mohammed",
  lastname: "Haddad"
}

delete Employee.firstname;

console.log(Employee);
// expected output: { lastname: "Haddad" }

answered Jun 21, 2018 at 14:44

Kevin Aud

3982 silver badges12 bronze badges

2 Comments

smartmouse Over a year ago

I read that delete is very slow and not well to use... (the downvote it's not mine!)

Kevin Aud Over a year ago

I could be wrong, but I believe that only applies if you are using delete to remove elements from an array, not when you are using it to remove properties from an object.

Collectives™ on Stack Overflow

How to get a subset of a Javascript object with nested properties?

5 Answers 5

2 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related