Search code examples
typescriptdestructuring

How to destructure array of objects?


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


Solution

  • 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);