使用 TypeScript / Angular2 循环对象的键/值[重复]

2024-05-08

如何使用 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;
    }
}

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

这是获取数组的方法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()。不同之处在于后者也返回不可枚举的属性。在这种特殊情况下,它没有实际差异,但应该使代码的意图更加明确。其他一切都保持不变。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 TypeScript / Angular2 循环对象的键/值[重复] 的相关文章

  • 类型错误:无法读取 NestJS 依赖注入上未定义的属性

    我越来越TypeError Cannot read properties of undefined reading create at AuthenticationService register并花了很多时间阅读这个网站 和其他网站 试图
  • 如何在 Sequelize ORM 中限制连接行(多对多关联)?

    Sequelize 定义了两种模型 具有多对多关联的 Post 和 Tag Post belongsToMany db Tag through post tag foreignKey post id timestamps false Tag
  • Javascript 在另一个函数中检测“Shift”键按下

    我正在从 Flash 影片 使用外部接口 调用我的 html 页面中的 Javascript 函数 并且我想知道调用该函数时用户是否按下了 Shift 键 例如 如果我通过鼠标单击调用该函数 这似乎很简单 因为我可以传递事件并检查 if e
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上
  • 使用服务器端数据源时,标题复选框选择不起作用

    正如标题所示 我正在使用ag grid与 Angular 我使用一个自定义类来实现IServerSideDatasource用于从 API 获取数据rowModelType设置为 服务器端 问题是当我设置headerCheckboxSele
  • 找不到“节点”的类型定义文件

    更新 Angular Webpack 和 TypeScript 后出现奇怪的错误 知道我可能会错过什么吗 当我使用 npm start 运行应用程序时 出现以下错误 at loader Cannot find type definition
  • put方法中的Angularjs文件上传不起作用

    我有一个简单的待办事项应用程序 我试图在其中上传照片和单个待办事项 现在我已经创建了这个工厂函数来负责待办事项的创建 todosFactory insertTodo function todo return http post baseUr
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do
  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚
  • 为什么`Option`支持`IntoIterator`?

    我试图迭代字符串向量的一个子部分 即Vec
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 如何:带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击
  • 在具有多级分组的 HTML 表格中显示数据

    我必须通过使用 rowspan 进行分组来显示 HTML 表中的一些数据 下面是预期的 GUI 我有如下所示的 JSON 数据 JSON数据here https jsoneditoronline org id 1014438e5489485

随机推荐

  • jQuery UI 和原型冲突

    我正在 Perl 中向我们的网站添加一个新表单 不是我的选择 表单会自动生成大量 html 以创建一致的外观 我的问题在于遗留系统在整个页面 包括加载时 中使用原型来处理各种事情 不过我想使用 jQuery 主要是 jQuery UI 中的
  • 在 Android 中使用 SQL (JDBC) 数据库

    在旧的 Java 应用程序中 我使用以下代码连接到 SQL 数据库并将其用于某些查询 private Connection dbConnection null System setProperty derby system home C C
  • 如果数组重叠,则折叠多行数组

    我在 PostgreSQL 9 3 中有一个表 其中包含一个列 每行包含一个数组 我正在努力寻找崩溃的方法 共享相同元素的数组行 Examples 简单重叠 给定以下两行数组 1 2 3 5 3 6 9 结果将是一行包含 5 1 2 3 6
  • 将 ASP.NET TextBox 呈现为 HTML5 输入类型“Number”

    当 ASP NET TextBox 呈现时 它会生成
  • 如何获取Oracle中命名事务的名称?

    我想在触发器中使用事务的名称 以便将其写入列中 我尝试了这个 在 SQL Developer 中 set transaction name hello select DBMS TRANSACTION LOCAL TRANSACTION ID
  • 如何在 Windows 上为“flask run”设置环境变量?

    我刚刚开始学习 Flask 我一直停留在设置 Flask 环境变量上 我不知道如何设置环境变量 每当我使用flask run命令 我遇到以下错误 错误消息 无法找到 Flask 应用程序 您没有提供 FLASK APP 环境变量 并且在当前
  • 所有人共享的 First Load JS 在 next.js 中相当重

    I have a project on Next js framework and the problem is that First Load JS shared by all pages is rather heavy I want t
  • 用于插入/删除/排名/选择查询的最佳数据结构/算法

    到目前为止 我知道像AVL树和红黑树这样的自平衡BST可以在O log n 次内完成这些操作 然而 要使用这些结构 我们必须自己实现AVL树或RB树 我听说有一个算法 实现这四个操作而不使用自平衡 BST 有了我们自己定义的结构 我们就需要
  • Python 中的数据可用性图表

    我想知道Python是否有一些东西可以绘制具有多个变量的时间序列的数据可用性 下面显示了一个示例 取自Visavail js 时间数据可用性图表 https github com flrs visavail 1 description 以下
  • 确定方法调用顺序的接口设计模式

    我想创建一个具有多种方法的 Java 接口 但我希望界面的用户只能按照我定义的顺序或顺序调用方法 例如buyTicket 不应在此之前调用reserveTicket 问 有没有设计模式或任何关于如何做到这一点的提示 我考虑过 A 接口被包装
  • 同时重新排序和旋转图像的高效方法

    为了快速加载 jpeg 我为turbojpeg 实现了一个 mex wrapper 以有效地将 大 jpeg 读入 MATLAB 对于 4000x3000px 的图像 实际解码只需要大约 120 毫秒 而不是 5 毫秒 然而 像素顺序是 R
  • SwiftUI - 获取孩子的大小?

    有什么方法可以获取 SwiftUI 中子视图的大小吗 我基本上希望做 UIKit 相当于 self child frame origin x self child intrinsicContentSize width 2 0 我认为 Geo
  • Rails has_many 通过使用 source 和 source_type 为多种类型设置别名

    这是一个示例类 class Company lt ActiveRecord Base has many investments has many vc firms through investments source investor so
  • 扭曲和响应类型以及特征对象?

    我有一个扭曲拒绝处理程序 我像这样使用它 recover handle rejection 它是这样声明的 pub async fn handle rejection err Rejection gt Result
  • 二进制浮点加法算法

    我试图理解二进制级别的 IEEE 754 浮点加法 我遵循了一些在网上找到的示例算法 并且大量测试用例与经过验证的软件实现相匹配 我的算法目前只处理正数 但是 我没有得到与此测试用例的匹配 0000100011110011011001001
  • 类型“MyApp”已包含“MystatusBar”的定义

    我的应用程序 XAML
  • 如何指定使用Glide for Android加载图片的重试次数?

    我正在为我的 Android 应用程序使用 glide 库 我想告诉它在放弃并显示错误占位符图像之前重试获取图像 X 次 可能使用指数退避 知道如何做到这一点吗 顺便说一句 我正在使用 Volley 集成 使用您自己的资源解码器 我仅加载本
  • PyTorch 中的交叉熵

    交叉熵公式 但为什么下面给出loss 0 7437代替loss 0 since 1 log 1 0 import torch import torch nn as nn from torch autograd import Variable
  • 模板是如何实例化的?

    这是一个练习 来自C 入门第五版 练习 16 27 对于每个带标签的语句 解释什么 如果有 实例化发生 如果实例化了模板 请解释原因 如果 不 请解释为什么不 第677页 template
  • 使用 TypeScript / Angular2 循环对象的键/值[重复]

    这个问题在这里已经有答案了 如何使用 TypeScript 迭代对象并能够访问键和值 我的 json 对象看起来像这样 clients 123abc Forename Simon Surname Sample 456def Forename