Loop over object's key/value using TypeScript / Angular2 [duplicate]

Question

How can I iterate over a Object using TypeScript and being able to access key and value?

My json object looks something like this:

{
    "clients": {
        "123abc": {
            "Forename": "Simon",
            "Surname": "Sample"
        },
        "456def": {
            "Forename": "Charlie",
            "Surname": "Brown"
        }
    }
}

The clients object to be filled is made of client models looking like:

export class ClientModel {
    id:string;
    forename:string;
    surname:string;

    constructor(
        private id:string,
        private forename:string,
        private surname:string
    ) {
        this.id = id;
        this.forename = forename;
        this.surname = surname;
    }
}

Nikos Paraskevopoulos · Accepted Answer · 2016-06-07 11:17:54Z

9

Given:

var a = {
    "clients": {
        "123abc": {
            "Forename": "Simon",
            "Surname": "Sample"
        },
        "456def": {
            "Forename": "Charlie",
            "Surname": "Brown"
        }
    }
};

class ClientModel {
    constructor(
        private id:string,
        private forename:string,
        private surname:string
    ) {}
}

Here is how to get an array of ClientModel objects:

var clientList: ClientModel[] = Object.getOwnPropertyNames(a.clients)
    .map((key: string) => new ClientModel(key, a.clients[key].Forename, a.clients[key].Surname));

...and here how to get a map from string (id) to ClientModel:

var clientMap: { [key: string]: ClientModel } = Object.getOwnPropertyNames(a.clients)
    .reduce((map: any, key: string) => {
        map[key] = new ClientModel(key, a.clients[key].Forename, a.clients[key].Surname);
        return map;
    }, {});

After the comment from basarat and taking a closer look at Object.keys(), Object.keys is more appropriate for use here than Object.getOwnPropertyNames(). The difference is that the latter returns non-enumerable properties too. It has no practical difference in this particular case, but should make the intent of the code more explicit. Everything else remains the same.

edited Jun 7, 2016 at 11:17

answered Jun 6, 2016 at 22:06

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

3 Comments

Sommereder Over a year ago

A lot to learn for old school JavaScript developers. Thank you very much!

basarat Over a year ago

Very strongly prefer Object.keys. Same thing (for most purposes stackoverflow.com/a/22658584/390330), simpler and more common in the wild 🌹

Nikos Paraskevopoulos Over a year ago

@basarat Yes, indeed, Object.keys is more appropriate, thank you.

Collectives™ on Stack Overflow

Loop over object's key/value using TypeScript / Angular2 [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related