如何重命名某些 JSON 对象属性以在 HTML Table 中显示它

Question

如果我有一个从数据库中获取的对象列表

[{ "id":0 ,"name":"John", "lastname":"Shell" },{ "id":1,...];

这导致（dynatable 插件）：

 data : JSON.stringify(data)
 success: function(data,status){ 
          $('#table').dynatable({
            dataset:{
              records:data
            }
          })
        }

但我不想在 html 中生成 table 时在 'th' 上显示 id，而是我想要将其重命名为 securityNumber 而不更改实际的 JSON

      <table id="tabela">
        <thead>
           <th>id</th>
           <th>name<th>
           <th>last_name<th>
        </thead>
      </table>

我不能只替换 id，因为插件通过 JSON 对象的属性识别列名称

我尝试过不同的插件，我使用的是 dynatable（已在文档中搜索过）但我愿意接受另一种解决方案。

我该如何进行？

Answer 1

您可以在 textTransform 上添加自定义格式设置方法，并在那里写下列名的映射。查看文档 here.

这种方法的一个例子可能是

dynatable.utility.textTransform.customColumnName = function(text) {
  if (text) === 'id' return 'security_number'
  return text
}

或者，您可以使用 Array.map 转换数组而不更改源 JSON，例如：

...
records: data.map((item) => {
  return {
    security_number: item.id,
    name: item.name,
    last_name: item.last_name
  }
}),
...

如何重命名某些 JSON 对象属性以在 HTML Table 中显示它

How to rename certain JSON Object attribute to display it in HTML Table

html

javascript

css

json

dynatable