使用TypeScript / Angular2循环遍历对象的键/值

Question

使用TypeScript / Angular2循环遍历对象的键/值

javascriptforeachtypescriptangularkey-value

4

如何使用TypeScript迭代对象并能够访问键和值？

我的JSON对象看起来像这样：

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

客户端需要填写的对象是由客户端模型组成的，看起来像这样：

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;
    }
}

- Sommereder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikos Paraskevopoulos · Accepted Answer

假设：

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
    ) {}
}

这里是获取一个ClientModel对象数组的方法：

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

以下是如何从string (id)获取到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;
    }, {});

在收到basarat的评论并仔细查看Object.keys()后，使用Object.keys比Object.getOwnPropertyNames()更合适。区别在于后者也返回不可枚举的属性。在这种特定情况下，两者没有实质性的差异，但应该会使代码的意图更加明确。其他内容保持不变。