How to destructure array of objects?

Question

Given this JSON object:

{
    "Person": {
        "UID": 78,
        "Name": "Brampage",
        "Surname": "Foo"
    },
    "Notes": [
        {
            "UID": 78,
            "DateTime": "2017-03-15T15:43:04.4072317",
            "Person": {
                "Name": "Brampage",
                "Surname": "Foo"
            },
            **"Note":** {
                "Title": "Lorem Ipsum...",
                "Content": "Blaat blaat blaat blaat ..."
            }
        },
        {
            "UID": 78,
            "DateTime": "2017-03-15T15:43:04.4072317",
            "Person": {
                "Name": "Brampage",
                "Surname": "Foo"
            },
            "Note": {
                "Title": "Lorem Ipsum...",
                "Content": "Blaat blaat blaat blaat ..."
            }
        }
        // etc.
    ]
}

How should I destructure this object so that I will be left over with this data: Person, Notes.Note[].

This is what I have tried to accomplish the above, however it does not work:

this.http.get(url)
.map(res => {
    const jsonObject = res.json();

    // Destructuring
    const { Person} = jsonObject;
    const [{ Note }] = jsonObject.Notes;

    return {
        person: Person,
        note:[
            Note
        ]
    }
})
.subscribe(
    usefullInformation => {
        console.log(usefullInformation);
    },
    error => {
    }
);

This is TypeScript's documentation on how to destructure: TypeScript Destructuring Documenation

Can’t do that with destructuring. Just use regular dot access and map. — Ry-
– Ry- ♦, Commented Mar 17, 2017 at 8:53

Sebastian Sebald · Accepted Answer · 2017-03-17 09:58:35Z

1

As Ryan said, you need to serialize your data by hand. Because destructuring does not handle conditional statements. I would suggest you write a serializer function that is called by Observable.map on the data.

For example:

const data = {
    "Person": {
        "UID": 78,
        "Name": "Brampage",
        "Surname": "Foo"
    },
    "Notes": [
        {
            "UID": 78,
            "DateTime": "2017-03-15T15:43:04.4072317",
            "Person": {
                "Name": "Brampage",
                "Surname": "Foo"
            },
            "Note": {
                "Title": "Lorem Ipsum...",
                "Content": "Blaat blaat blaat blaat ..."
            }
        },
        {
            "UID": 78,
            "DateTime": "2017-03-15T15:43:04.4072317",
            "Person": {
                "Name": "Brampage",
                "Surname": "Foo"
            },
            "Note": {
                "Title": "Lorem Ipsum...",
                "Content": "Blaat blaat blaat blaat ..."
            }
        }
    ]
}

function getNotesFor(uid, notes) {
  return notes
    .filter(item => item.UID === uid)
    .map(item => item.Note);
}

const { Person } = data;
const Notes = getNotesFor(Person.UID, data.Notes);

console.log(Person, Notes);

answered Mar 17, 2017 at 9:58

Sebastian Sebald

17k5 gold badges65 silver badges66 bronze badges

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

1 Comment

Brampage Over a year ago

Since it is not possible with destructuring I accept this answer, thanks for the clear solution, I thought I probably overlooked something.

Collectives™ on Stack Overflow

How to destructure array of objects?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related