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

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;
 });

我设法绑定了id，但我无法在foods 数组中绑定name。 如何在该数据的foods数组中获取name？

Plunker： http://plnkr.co/edit/2oiOc06cZph4en8DJ18n

Answer 1

您需要另一个 ng-repeat。像这样的：

<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-repeat 正常工作，您需要使用字符串强制 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

Answer 2

这是一个可以工作的 plunker http://plnkr.co/edit/snE9Em0tCKh0nUHIlTFn?p=preview。 考虑修改您的 JSON 文件。使用双引号代替单引号。

在新 plunker 中修改后的 JSON 文件中，在此处删除双引号 "[{'id':1,

Answer 3

我对您的数据进行了一些更改，它解决了您面临的问题。

这里是plunker链接

`http://plnkr.co/edit/nxBGMMyuNIzUOvQAu7YY?p=preview`

Answer 4

每个order 都是这样的对象：

  {
     "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"
  }

注意foods 指向一个对象，其唯一的键'foods' 指向一个数组...其第一个组件应该是一个对象。但是，如果您仔细阅读：

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

注意到foods 值周围的双引号了吗？他们的意思是它指向一个字符串而不是一个对象。

首先，您需要删除 foods 和 drinks 的值周围的双引号：

"foods":{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]},
"drinks":{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]},

然后将单引号全部替换为双引号，使对象符合JSON对象定义：

"foods":{"foods":[{"id":2, "name":"Nasi Goreng", "qty":1}]},
"drinks":{"drinks":[{"id":1,"name":"Milo Ais","qty":1}]},

现在，要获取'name'，您需要访问order.foods.foods[0].name 而不是order.foods.name。