角NG重复使用嵌套的JSON对象？ [英] Angular ng-repeat with nested json objects?

问题描述

我psented这样一个JSON对象，再$ P $：

  {
  命令 ： [
    {
      ordernum的：PRAAA000000177800601，
      买家：唐娜海伍德
      包裹：[
        {
          UPID：UPID567890123456，
          正品：TPID789456789485
        }，
        {
          UPID：UPID586905486090，
          正品：TPID343454645455
        }
      ]
    }，
    {
      ordernum的：ORAAA000000367567345，
      买家：梅兰妮·丹尼尔斯
      包裹：[
        {
          UPID：UPID456547347776，
          正品：TPID645896579688
        }，
        {
          UPID：UPID768577673366，
          正品：TPID784574333345
        }
      ]
    }
  ]
}
 

我需要做的第二的这个级别的中继，在UPID号的列表。

我已经知道如何让顶级

＆LT;李NG重复=o在订单＆GT; {{o.ordernum}}＆LT; /李＆GT;

但我的顺序循环水平下降不清楚。例如，这是错误的：

＆LT;李NG重复=p在orders.parcels＆GT; {{p.upid}}＆LT; /李＆GT;

我也知道如何的巢的中继器来得到这个，但在这种情况下，我并不需要在所有显示的顶级水准。

澄清

这里的目标是有一个列表与4UPID数字（有2个为每个包裹，并有2个包裹的顺序）。

解决方案

您可以只创建新阵'包裹'在下面的演示，如：

\r

\r

VAR应用= angular.module（'应用'，[]）;\r
app.controller（'homeCtrl'，函数（$范围）{\r
  $ scope.data = {\r
    命令： [{\r
      ordernum的：PRAAA000000177800601，\r
      买家：唐娜海伍德\r
      包裹：[{\r
        UPID：UPID567890123456，\r
        正品：TPID789456789485\r
      }，{\r
        UPID：UPID586905486090，\r
        正品：TPID343454645455\r
      }]\r
    }，{\r
      ordernum的：ORAAA000000367567345，\r
      买家：梅兰妮·丹尼尔斯\r
      包裹：[{\r
        UPID：UPID456547347776，\r
        正品：TPID645896579688\r
      }，{\r
        UPID：UPID768577673366，\r
        正品：TPID784574333345\r
      }]\r
    }]\r
  };\r
\r
  $ scope.parcels = [];\r
  angular.forEach（$ scope.data.orders，功能（顺序）{\r
    angular.forEach（order.parcels，功能（包裹）{\r
      $ scope.parcels.push（包裹）\r
    }）\r
  }）\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
  ＆LT; D​​IV NG控制器=homeCtrl＆GT;\r
\r
    ＆LT; UL＆GT;\r
      ＆LT;李NG重复=o在包裹＆GT; {{o.upid}}＆LT; /李＆GT;\r
    ＆LT; / UL＆GT;\r
\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I have a JSON object, represented as such:

 {
  "orders" : [
    {
      "ordernum" : "PRAAA000000177800601",
      "buyer" : "Donna Heywood"
      "parcels" : [
        {
          "upid" : "UPID567890123456",
          "tpid" : "TPID789456789485"
        },
        {
          "upid" : "UPID586905486090",
          "tpid" : "TPID343454645455"          
        }
      ]
    },
    {
      "ordernum" : "ORAAA000000367567345",
      "buyer" : "Melanie Daniels"
      "parcels" : [
        {
          "upid" : "UPID456547347776",
          "tpid" : "TPID645896579688"
        },
        {
          "upid" : "UPID768577673366",
          "tpid" : "TPID784574333345"
        }
      ]
    }
  ]
}

I need to do a repeater on the second level of this, a list of the "upid" numbers.

I know already how to get the top level

<li ng-repeat="o in orders">{{o.ordernum}}</li>

But I am unclear on the sequence to loop a level down. For example, this is wrong:

<li ng-repeat="p in orders.parcels">{{p.upid}}</li>

I also know how to nest repeaters to get this, but in this case i don't need to display the top level at all.

CLARIFICATION

The goal here is to have one list with the 4 "upid" numbers (there are 2 for each parcel, and there are 2 parcels in the order).

解决方案

You can just create new array 'parcels' like in demo below:

var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
  $scope.data = {
    "orders": [{
      "ordernum": "PRAAA000000177800601",
      "buyer": "Donna Heywood",
      "parcels": [{
        "upid": "UPID567890123456",
        "tpid": "TPID789456789485"
      }, {
        "upid": "UPID586905486090",
        "tpid": "TPID343454645455"
      }]
    }, {
      "ordernum": "ORAAA000000367567345",
      "buyer": "Melanie Daniels",
      "parcels": [{
        "upid": "UPID456547347776",
        "tpid": "TPID645896579688"
      }, {
        "upid": "UPID768577673366",
        "tpid": "TPID784574333345"
      }]
    }]
  };

  $scope.parcels = [];
  angular.forEach($scope.data.orders, function(order) {
    angular.forEach(order.parcels, function(parcel) {
      $scope.parcels.push(parcel)
    })
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">

    <ul>
      <li ng-repeat="o in parcels">{{o.upid}}</li>
    </ul>

  </div>
</div>

这篇关于角NG重复使用嵌套的JSON对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！