Javascript 从JSON创建HTML表

我有一个rails应用程序，我正在转换成angularjs

通过rest API，我得到了类似于以下内容的JSON：

[{"id":1,"products":{"type":"Mustang","color":"blue"},"created_at":"2013-12-02T01:05:20.956Z","updated_at":"2013-12-02T01:05:20.956Z"}]

目前，我的angular只是在JSON中循环并打印出整个数据列：

<tr ng-repeat="row in rows">
    <td><a href='#'>THIS IS -> </a>{{row.data}}</td>
</tr>

{{row.data}

基本上，我想从数据列、键和值中提取数据，并基于它创建一个HTML表。问题是数据可能会有所不同，所以像“type:Mustang”这样的键/值并不总是第一个，有时值会是空的，但键不会

不久前我问了一个类似的问题，得到了一个非常好的回答。解决方案2非常适合Ruby，但我想在我的项目中将其转换为angularjs

---

谢谢你的帮助

您可以将其设置为一个指令来代替ng repeat（这只是一个指令），并遵循Ruby代码中的逻辑

或

您可以使用ng repeat，并使用一个以row.data作为参数的函数来代替{{row.data}。然后，该函数可以处理对键/值的必要检查

---

Darryl

要以AngularJS的方式转换Ruby解决方案，您可以使用第三方库，如您所需转换JSON

因此，您可以首先从rest API响应中检索产品列表：

var rows = [{"id":1,"products":{"type":"Mustang","color":"blue"},"created_at":"2013-12-02T01:05:20.956Z","updated_at":"2013-12-02T01:05:20.956Z"}, ...]
$scope.products = _.pluck(rows, 'products'); // make a list of the products property of each row

然后，您可以计算标题：

$scope.headers = _.chain($scope.products)
                  .map(_.keys) // take the keys of each product
                  .reduce(function(a, b) {
                            return _.union(a, b);
                          }, []) // merge all keys without double
                  .value();

最后，您可以通过迭代标题和产品来显示表：

<table>
  <tbody>
    <tr>
      <th ng-repeat="key in headers">{{ key }}</th>
    </tr>
    <tr ng-repeat="product in products">
      <td ng-repeat="key in headers">{{ product[key] }}</td>
    </tr>
  </tbody>
</table>

{{key}}
{{product[key]}

如果产品没有给定的密钥，则不会显示任何内容

看看这个

---

像下划线这样的实用程序库非常方便以功能性方式操作数据。我建议您查看API和文档。

如果数据结构不一致，最好在将其传递给控制器之前进行一些映射。甚至不清楚要映射到哪些列的json数据……没有任何内容与html匹配。您可以定义列，然后使用这些列来映射行和单元格的数组，使用数组来

ng repeat

行和单元格可以更具体一些吗？如果缺少键，该怎么办？值应该显示，列应该为空，还是不应该显示这样的记录？@arturrzesiak，感谢您的回复。应该始终有一个键，但有时与该键对应的值将为空。在这些情况下，它应该只显示一个空白列。JSON有嵌套的对象，特别是“products”对象，而您提到的类似问题只有一个平面结构。您能否澄清一下，您希望如何处理最终输出方面的嵌套？视觉上保持这种嵌套可能会使事情复杂化。