带有嵌套json对象的Angular ng-repeat? [英] Angular ng-repeat with nested json objects?

问题描述

我有一个 JSON 对象，表示如下:

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

我需要在此的第二级做一个中继器，一个upid"数字列表.

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

{{o.ordernum}}

但我不清楚向下循环的顺序.例如，这是错误的:

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

{{p.upid}}

我也知道如何嵌套中继器来获得这个，但在这种情况下我根本不需要显示顶级.

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.

澄清

这里的目标是有一个包含 4 个upid"数字的列表(每个包裹有 2 个，并且订单中有 2 个包裹).

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).

推荐答案

搜索了很多用于动态迭代的漂亮而简单的解决方案.我想出了这个

Searching a lot for nice and simple solution for iterating dynamically. I came up with this

JAVASCRIPT(angular):一个人是嵌套对象的一个​​例子.is_object 函数将在 HTML 视图中使用.

JAVASCRIPT (angular): a person is an example of nested object. the is_object function will be use in the HTML view.

$scope.person = {
    "name": "john",
    "properties": {
       "age": 25,
       "sex": "m"
    },
    "salary": 1000
}

// helper method to check if a field is a nested object
$scope.is_object = function (something) {
    return typeof (something) == 'object' ? true : false;
};

HTML:定义简单表格的模板.第一个 TD 是显示的键.如果不是对象(数字/字符串)，则另一个 TD(2 或 3，但永远不会同时显示)将显示该值，如果它是对象，则再次循环.

HTML: define a template for simple table. the 1st TD is the key which is displayed. another TD (2 or 3, but never both) will be show the value if its not an object (number / string), OR loop again if its an object.

<table border="1">
<tr ng-repeat="(k,v) in person">
    <td> {{ k }} </td>
    <td ng-if="is_object(v) == false"> {{ v }} </td>
    <td ng-if="is_object(v)">
        <table border="1">
            <tr ng-repeat="(k2,v2) in v">
                <td> {{ k2 }} </td>
                <td> {{ v2 }} </td>
            </tr>
        </table>
    </td>
</tr>
</table>

这篇关于带有嵌套json对象的Angular ng-repeat?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！