Question

132

Loop over object's key/value using TypeScript / Angular2

rated 0 times [ 136] [ 4] / answers: 1 / hits: 25092 / 8 Years ago, mon, june 6, 2016, 12:00:00

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;

    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

braydon

Add To Favorites

Follow

Total Points: 0

Total Questions: 102

Total Answers: 111

Location: Sao Tome and Principe

Member since Wed, Dec 29, 2021

2 Years ago

braydon questions

1 Protect Routes/Pages with NextJs

Tue, Nov 23, 21, 00:00, 3 Years ago

1 vue3 isCustomElement is detecting component as a vue component

Fri, Feb 26, 21, 00:00, 3 Years ago

1 How to implemet useMutation from react-query in handleSubmit

Mon, Dec 21, 20, 00:00, 4 Years ago

1 Auth.signOut dosent sign out as expected

Fri, May 15, 20, 00:00, 4 Years ago

1 Vue.prototype is undefined on first load of the page

Fri, Mar 27, 20, 00:00, 4 Years ago

View All

answered 8 Years ago angelr · Accepted Answer

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.