javascript - 如何在对象中重复对象的数组？

Question

我有这些数据:

{
   "order":[
      {
         "id":1,
         "table":1,
         "foods":"{'foods':[{'id':2, 'name':'Nasi Minyak', 'qty':1}]}",
         "drinks":"{'drinks':[{'id':1,'name':'Teh O Ais','qty':1}]}",
         "waiter":"ali",
         "foods_status":0,
         "drinks_status":0,
         "created_at":"2015-07-12T00:30:52.637Z",
         "updated_at":"2015-07-12T00:30:52.637Z"
      },
      {
         "id":2,
         "table":2,
         "foods":"{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]}",
         "drinks":"{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]}",
         "waiter":"abu",
         "foods_status":0,
         "drinks_status":0,
         "created_at":"2015-07-12T00:51:43.552Z",
         "updated_at":"2015-07-12T00:51:43.552Z"
      }
   ]
}

我尝试抓取表中的所有食物name，如下所示:

<table class="table-bordered table table-striped">
        <thead>
            <tr>
                <td>#</td>
                <td>Name</td>
                <td>Action</td>
            </tr>   
        </thead>
        <tbody>
            <tr ng-repeat="order in orders">
                <td>{{order.id}}</td>
                <td>{{order.foods.name}}</td>
                <td>
                    <button class="btn btn-danger" ng-click="">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>

这是我获取数据的 $http.get:

$http.get("../api/orders")
 .success(function(data) {
  var order = data.order;
  $scope.orders = order;
 });

我成功绑定(bind)了 id，但无法在 foods 数组中绑定(bind) name。如何获取此数据的 food 数组中的 name ？

骗子: http://plnkr.co/edit/2oiOc06cZph4en8DJ18n

Answer 1

你需要另一个 ng-reapeat。像这样的事情:

<tr ng-repeat="order in orders">
    <td>{{order.id}}</td>
    <td>
        <span ng-repeat="item in order.foods.foods">{{item.name}}/</span>
    </td>
    <td>
        <button class="btn btn-danger" ng-click="">Delete</button>
    </td>
</tr>

另一个考虑因素是 JSON 的格式。这一行:

"foods":"{'foods':[{'id':2, 'name':'Nasi Minyak', 'qty':1}]}"

事实上，“foods”持有一个字符串，而不是一个对象。为了使 ng-reapeat 工作，您需要使用以下命令强制从字符串中获取 JSON:

JSON.parse(jsonString);

或将您的 JSON 更改为:

"foods":{"foods":[{"id":2, "name":"Nasi Minyak", "qty":1}]}

旁注，为什么要重复“食物”和“饮料”键？对我来说似乎不符合逻辑。将您的数据结构更改为:

"order":[
      {
         "id":1,
         "table":1,
         "foods":[{"id":1, "name":"Nasi Kerabu", "qty":1},{"id":2, "name":"Nasi Minyak", "qty":1}],
         "drinks":[{"id":1,"name":"Sirap Ais","qty":1},{"id":2, "name":"Milo Ais", "qty":1}],
         "waiter":"ali",
         "foods_status":0,
         "drinks_status":0,
         "created_at":"2015-07-12T00:30:52.637Z",
         "updated_at":"2015-07-12T03:30:35.684Z"
      },
      ...
      ]

并使用:

<td>  <span ng-repeat="item in order.foods">{{item.name}}</span> </td>

这是一个经过以下修改的 plunker: http://plnkr.co/edit/UVvCVzh4hbsEwolyWpDs?p=preview