当未提供json数据的结构/字段名称时，将json数据动态显示为表格

Question

在我的应用程序中，我将以json格式接收数据，并且希望以表格形式在Web浏览器中显示数据。请注意我不会知道我收到的数据的结构/字段名称。我的要求是动态地为我接收的任何json对象构造一个表。我将如何使用angularjs实现它？是否还有其他任何JavaScript库/框架jQuery的/道场，可以帮助我实现上述功能？

Answer 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会为表格中的每个“单元格”创建它自己的范围）。这就是为什么大多数人转向图书馆或指令来完成这项任务。

但是，你是一个聪明的人。你有堆栈上的代表。您可能有很好的理由提出这个问题。所以，不要讲道。项目祝你好运！