如何迭代 JavaScript 对象的属性名称?

2024-03-04

我想从 JavaScript 对象获取属性名称以动态构建表。

例如:

var obj = {'fname': 'joe', 'lname': 'smith', 'number': '34'};

for (var i = 0; i < obj.properties.length; i++) {
  alert(' name=' + obj.properties[i].name + ' value=' + obj.properties[i].value);
}

这将打印:

name=fname value=joe

name=lname value=smith

name=number value=34

然后我可以使用这样的对象构建一个表:

var obj = { 'players': [
     { 'fname': 'joe', 'lname': 'smith', 'number': '34'} ,
     { 'fname': 'jim', 'lname': 'Hoff', 'number': '12'} ,
     { 'fname': 'jack', 'lname': 'jones', 'number': '84'}
] };

生产:

| fname |  lname |  number |
|-------|--------|---------|
| joe   | smith  |      34 |
| jim   | Hoff   |      12 |
| jack  | jones  |      84 |

UPDATE

感谢您的回答,我使用标题列表中第一个对象的属性名称从 JavaScript 对象生成了一个表:

function renderData() {
    var obj = { 'players': [
        { 'fname': 'joe', 'lname': 'smith', 'number': '34' },
        { 'fname': 'jim', 'lname': 'jones', 'number': '12' },
        { 'fname': 'jack', 'lname': 'Hoff', 'number': '84' } 
        ] };

    var cols = GetHeaders(obj); 

    $('#Output').html(CreateTable(obj, cols));
}

function CreateTable(obj, cols) {
    var table = $('<table></table>');
    var th = $('<tr></tr>');
    for (var i = 0; i < cols.length; i++) {
        th.append('<th>' + cols[i] + '</th>');
    }
    table.append(th);

    for (var j = 0; j < obj.players.length; j++) {
        var player = obj.players[j];
        var tr = $('<tr></tr>');
        for (var k = 0; k < cols.length; k++) {
            var columnName = cols[k];
            tr.append('<td>' + player[columnName] + '</td>');
        }
        table.append(tr);
    }
    return table;
}

function GetHeaders(obj) {
    var cols = new Array();
    var p = obj.players[0];
    for (var key in p) {
        //alert(' name=' + key + ' value=' + p[key]);
        cols.push(key);
    }
    return cols;
}

Use for...in loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in:

for (var key in obj) {
   console.log(' name=' + key + ' value=' + obj[key]);

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

如何迭代 JavaScript 对象的属性名称? 的相关文章

  • 取消html5浏览器中的单图请求

    我正在动态加载 大 图像以绘制到 html5 画布中 如下所示 var t new Image t onload t src http myurl 但每隔一段时间就会想取消图片请求完全地 我想出的唯一方法是设置src to i e t sr
  • 用隐藏单元格补充 colspanned 表格有什么不好吗?

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • 使用 CryptoJS 更改密钥 [重复]

    这个问题在这里已经有答案了 我正在使用 CryptoJS 来加密和解密文本 在这里 我只是获取消息并显示加密和解密消息 我使用DES算法进行加密和解密 这是我的 HTML 文件
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化?

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • Concourse 无法连接到 Docker 存储库

    我是广场新手 并尝试在我的环境中设置它 我在 Windows 机器上的 Virtualbox 6 1 4 r136177 上运行 Ubuntu 18 04 我设法让节点运行并设置大厅工作人员 并且我能够成功访问我的大厅仪表板 当我尝试运行本
  • QueryFailedError:格式错误的数组文字:typeORM 中的“[]”

    我正在尝试使用 TypeORM 在 postgres 中的表中添加新行 但收到 与数组文字相关的问题 问题发生在subscriptions field 实体格式 export class User PrimaryColumn userId
  • Hortonworks HDP Sandbox 上的 HBase:无法从 ZooKeeper 获取主地址

    我从 hortonworks for virtualbox 下载了 HDP 2 1 在简单命令中使用 Hbase shell 时出现以下错误 create t1 NAME gt f1 VERSIONS gt 5 Hortonworks 错误
  • CORS 请求在本地打开的 html 文件中被阻止

    我已经开始编写一个使用 JavaScript 显示数据的 HTML 文件 因为它应该尽可能简单地完成 所以我不想运行nodejs或任何其他本地http服务器 我刚刚在浏览器中打开了 HTML 文件 url 为 file home visu
  • 在rails中使用他的ip自动检测用户的时区

    我想从用户的 IP 地址找到他的时区 如果用户正在旅行 应用程序应该能够找出他所在的当前时区 你不能 至少可靠地 想想代理 ISP NAT 或 VPN 即使用户看起来在某个国家 地区 并不意味着他真的在那里 我建议让用户选择他喜欢的时区 并
  • .NET 中可以使用不可变数组吗?

    是否有可能以某种方式标记System Array作为不可变的 当放在 public get private set 后面时 它们无法添加到其中 因为它需要重新分配和重新分配 但消费者仍然可以设置他们希望的任何下标 public class
  • 跨服务器移动 mysql 文件

    我有一个巨大的 MySQL 数据库 大约 10 GB 我需要将其复制到不同的服务器 slicehost 我不想进行数据库转储并重新导入 b c 我认为这将花费很长时间 是否可以将原始 SQL 文件从一台机器移动到另一台机器 设置相同的 my
  • 当被模态视图控制器覆盖时,iOS 6 视图控制器布局在方向更改后不会更新

    我有一个 iPad 应用程序 非常适合 6 之前的 iOS 版本 我的根视图控制器显示一个列表 当您单击列表中的任何项目时 根视图控制器会呈现一个模式视图控制器来显示该项目的详细信息 问题是 我的根视图控制器在横向和纵向上有不同的布局 当不
  • Py_Initialize 运行需要哪些文件?

    我正在编写一段简单的代码 该代码从 C C 应用程序运行 Python 函数 为了做到这一点 我设置了 PYTHONPATH 并运行初始化 如下所示 Py SetPythonHome Python27 Py InitializeEx 0 然
  • 强制 R 不使用指数表示法(例如 e+10)?

    我可以强制 R 使用常规数字而不是使用e 10 类似符号 我有 1 810032e 09 and 4 在同一向量内并希望看到 1810032000 and 4 我正在为老式程序创建输出 我必须使用编写一个文本文件cat 到目前为止效果很好
  • java: Spring:如何将 bean 从一个 ClassPathXMLApplicationContext 传输到另一个?

    如何从一个豆子转移豆子ClassPathXMLApplicationContext到另一个 我创建一个这样的上下文 ClassPathXMLApplicationContext myOneContext new ClassPathXMLAp
  • 可展开列表视图自动折叠

    我无法在扩展新组时关闭之前扩展的组 我读过类似的问题 但我无法从中提取概念 我尝试使用 crashGroup groupPosition 方法 但它不起作用 您好 请尝试下面的代码 int lastExpandedGroupPosition
  • 关闭亮点

    我想关闭 PHPStorm 对非错误相关事物的烦人的突出显示 我读了他们的文档 其中说要转到首选项 gt 编辑器 gt 检查 我取消了 SQL 的所有选择 但我仍然无缘无故地得到绿色突出显示 我如何禁用此功能 这很让人分心 That s 语
  • 使用反射实例化内部类时出现 InstantiationException。为什么?

    我无法创建 B 对象 但为什么呢 public class AFactory public int currentRange private abstract class A protected final Object range cur
  • 线程 C++ 的瓶颈

    所以我只是想验证一下我的理解 希望你们能够消除任何误解 所以本质上我有两个线程使用相同的锁并在持有锁时执行计算 但有趣的是 在锁内我将导致线程休眠一小段时间 对于两个线程 每个线程的睡眠时间都会略有不同 由于锁的工作方式 较快的线程是否会因
  • 运行 GAE 开发服务器时,本地 MySQLdb 连接失败,并出现 paramstyle 的 AttributeError

    我正在使用 Flask Alchemy 针对 Cloud SQL 构建 GAE Flask 应用程序 并运行dev appserver在构建应用程序时对其进行测试 但是 如果我设置SQLALCHEMY DATABASE URI to a m
  • 通过蓝牙进行多点连接?

    我开始做广告 开始浏览 什么时候在同一个WiFi下 它可以工作 但是当我关闭 WiFi 时只留下蓝牙 甚至也不 void browser MCNearbyServiceBrowser browser foundPeer MCPeerID p
  • 如何使用 Google Drive API 将文件传输到其他用户的云端硬盘?

    我正在尝试转移当前属于我的 Google 文档 并将其移至另一个用户的 Google 云端硬盘的根目录 两个帐户都位于同一域中 我使用服务帐户来访问所有用户 起初我尝试通过修改权限来做到这一点 这将使第二个用户能够访问该文件 但不会将其放入
  • 如何使用“Matlab Data / Engine API for c++”在 C++ 中加载 .mat

    我正在尝试在 C 程序中包含 mat 然而 我无法使用传统的 mat h 由于 Matlab API for C 之间的内部兼容性问题 https de mathworks com help matlab matlab c api to r
  • 如何迭代 JavaScript 对象的属性名称?

    我想从 JavaScript 对象获取属性名称以动态构建表 例如 var obj fname joe lname smith number 34 for var i 0 i lt obj properties length i alert