在我的应用程序中,我将以json格式接收数据,并且希望以表格形式在Web浏览器中显示数据。请注意我不会知道我收到的数据的结构/字段名称。我的要求是动态地为我接收的任何json对象构造一个表。我将如何使用angularjs实现它?是否还有其他任何JavaScript库/框架jQuery的/道场,可以帮助我实现上述功能?当未提供json数据的结构/字段名称时,将json数据动态显示为表格
-1
A
回答
1
虽然这是一个范围之外的SO回答写的代码,我至少可以给你在这里的基本知识:
在你的控制器:创建列元数据
遍历1个或多个对象并创建您自己的元数据(我认为XLS和MSAccess会通过前10行的csv数据循环来获取一组基本字段,也许会这样做)。
$scope.rows = /// Get your data ... a json array of objects, I assume.
$scope.columns = getColumnsFromRows($scope.rows);
function getColumnsFromRows(rows) {
var cols = [];
if(rows==undefined || rows.length==0) { return cols; }
var sampleRow = rows[0];
for (var key in sampleRow) {
if (sampleRow.hasOwnProperty(key)) {
// I would add some datatype checking here. At least make sure
// we aren't looking at an array or a sub-object.
// Maybe turn a key like "firstName" into "First Name" for label
cols.push({label: key, fieldNm: key});
}
}
return cols;
}
您认为:NG-重复通过行/列
做是通过行/列使用NG-重复循环的最简单的事情。
<div ng-controller="MyController">
<table>
<thead>
<tr><th ng-repeat="col in columns">{{col.label}}</th></tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="col in columns">{{row[col.fieldNm}}]</td>
</tr>
</tbody>
</div>
所以,很简单。现在,您的整个桌子都由您的控制器控制。在那里添加过滤器,在那里添加排序等。
公平的警告,这只是示例代码。随着你变得更深,请确保take a deeper look at ng-repeat performance。数据集越大,页面运行速度越慢(ng-repeat会为表格中的每个“单元格”创建它自己的范围)。这就是为什么大多数人转向图书馆或指令来完成这项任务。
但是,你是一个聪明的人。你有堆栈上的代表。您可能有很好的理由提出这个问题。所以,不要讲道。项目祝你好运!
+0
谢谢bri,你给了我一个关于如何去做的一个公平的想法。我最初只是试图使用JavaScript来将json数据转换为html表格。一旦完成,我将计划使用角度js来实现相同。 –
相关问题
- 1. Jqgrid子网格json数据未显示
- 2. JSON数据未显示
- 3. 图表js饼图未显示使用JSON的动态数据
- 4. 显示函数提供json
- 5. 表示数字段的数据结构
- 6. 如何将JSON数据转换为未知名称的数组
- 7. 将Json数据解析为无Json数组名称的HTML
- 8. 将JSON数据转换为ColdFusion结构
- 9. 如何根据json数据显示多段动态高图
- 10. excel表格第一行字段名称显示为数据而不是字段?
- 11. 显示在数据表格式JSON
- 12. 动态数据链接字段名称
- 13. 将数据提取为JSON
- 14. 将动态JSON数据高效反序列化为数据表
- 15. json的Javascript数据结构
- 16. 将JSon数据显示到列表中
- 17. 如何动态地将JSON转换为数据库表格?
- 18. json数据的Javascript数据结构
- 19. 不显示未提供的div数据
- 20. 显示JSON数据
- 21. 显示JSON数据
- 22. 显示JSON数据
- 23. php数组如何在字段名称未知时提前将数据动态插入到mysql表中?
- 24. 提供JSON作为富数据:extendedDataTable
- 25. 如何在分段表格中显示抓取的JSON数据
- 26. 空数据表到列名称的Json
- 27. Highcharts将JSON数据动态拉入系列名称
- 28. 将表格数据转换为JSON
- 29. 的Json responsed数据未显示
- 30. JSON - 根据json索引显示数据
你应该检查http://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table?answertab=active#tab-top –
谢谢帕特,我有一个公平的想法从我的需求开始。我最初考虑接受一个json数据(详细信息未知),并使用javascript转换为html表格,而不使用任何js库或框架。 –