来自 Angularjs 的 json 表答案

【问题标题】：Table from json with Angularjs来自 Angularjs 的 json 表
【发布时间】：2015-10-22 00:12:42
【问题描述】：

我创建了一个 Angularjs 应用程序，它通过 REST API 获取 json 数据。我需要从下面的json格式中获取表中的数据。

{

"121":  {
    "buy":56,
    "sell":52,
    "customerId":63
    }

"122":
    {
    "buy":46,
    "sell":62,
    "customerId":13
    }
}

这里的 121 和 122 是交易 ID。我正在尝试以以下格式获取表中的数据，但我无法准确弄清楚如何显示交易 ID 及其相应的详细信息。

表格格式如下：

Transaction ID | Customer ID| Buy | Sell |

请指教。

【问题讨论】：

请展示您的尝试。有很多教程可以从中学习
那么，你最后做了什么？
@Anfelipe - 我按照你提到的方式做了。成功了！！
很高兴为您提供帮助，您可以将答案标记为正确，干杯！

标签： javascript html json angularjs

【解决方案1】：

这里的关键是使用 ng-repeat 指令的 "(key,value) in collection" 风格来执行 ng-repeat。

你的桌子应该是这样的>

<table>
  <thead>
    <tr>
      <th>Transaction ID</th>
      <th>Customer ID</th>
      <th>Buy</th>
      <th>Sell</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(id, t) in transactions">
      <td>{{ id }}</td>
      <td>{{ t.customerId }}</td>
      <td>{{ t.buy }}</td>
      <td>{{ t.sell }}</td>
    </tr>
  </tbody>
</table>

【讨论】：

我的回答也是，但你先到这里了:)。这是一个完成它的小提琴......jsfiddle.net/jroetman/y0Ltjr8r

【解决方案2】：

http://codepen.io/JakeBernstein65/pen/NqMpmM

<table class="table table-bordered">
        <thead>
            <tr>
                <td>Item</td>
                <td>Brand</td>
                <td>Quantity</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in main.shoppingList">
                <td>{{ item.name }}</td>
                <td>{{ item.brand }}</td>
                <td>{{ item.quantity }}</td>
            </tr>
        </tbody>
    </table>

这可能会回答你的问题

【讨论】：

【解决方案3】：

以下是您如何实现此目的的示例。您可以在控制器中创建一个名为 customerData 的模型并在视图中使用它

<table ng-table class="table">
  <thead>
  <tr>

    <th>Transaction Id</th>
    <th>Cutomer Id</th>
    <th>Buy</th>
    <th>Sell</th>

  </tr>
  </thead>
<tr ng-repeat="customer in customerData">
    <td data-title="'TransactionId'">{{customer.transactionId}}</td>
    <td data-title="'CustomerId'">{{customer.customerId}}</td>
     <td data-title="'Buy'">{{customer.buy}}</td>
      <td data-title="'Sell'">{{customer.sell}}</td>
</tr>
</table>

控制器将获取您的 JSON 数组并执行必要的投影，以便您可以在 ng-repeat 上使用它

var app = angular.module('app', ['ngRoute']);
app.controller('HomeController',['$scope', function($scope) {
    var customerDataFromService={
      "121":  {
          "buy":56,
          "sell":52,
          "customerId":63
          },

      "122":
          {
          "buy":46,
          "sell":62,
          "customerId":13
          }
      };
      $scope.customerData=[];
      angular.forEach(customerDataFromService,function(value,key){
        var customer = {'transactionId' : key, 'customerId' :   value.customerId,'buy': value.buy,'sell':value.sell}
     $scope.customerData.push(customer);
      });
  }]);

这是一个完整的解决方案http://plnkr.co/edit/muNiXRISj5XCc6qCmGFh?p=preview

【讨论】：