如何在 ng-repeat 中使用带有嵌套 JSON 的键值对

how to use key value pair in ng-repeat with nested JSON

本文关键字：嵌套 JSON 键值对 ng-repeat 更新时间：2023-09-26

我正在尝试使用 angular 以 JSON 格式打印获取的数据。该 JSON 是

"products": { "65": { "5": { "id": 5, "product_id": 1, "client_id": 96, "ticket_id": 65, "sold_by": 6, "product_price": 13000, "sold_from_date": 1434459600, "sold_to_date": 1444741200 },如何在前端重复此操作以显示其中的数据？

我试过这个，但它不起作用。

    <div ng-repeat="(product_id, product1) in acct_details.products">
                    <div ng-repeat="(product_id2, product2) in product1">
                        <tr ng-repeat="product in product2">
                            <td> <input class="chkbox-style" type="checkbox"></input>
                                 <p class="para-inline">{{product.product_name}}</p>
                            </td>
                            <td>
                                {{product.product_price | currency:"&#8377;"}}
                            </td>
                            <td>
                                {{product.sold_from_date *1000| date: 'mediumDate'}}
                            </td>
                            <td> 
                                {{product.sold_to_date *1000| date:'mediumDate'}}
                            </td>
                        </tr>
                    </div>
                    </div>****

首先，你的JSON应该得到改进。JSON 本身应该足以理解所表示的内容，但在本例中则不然。我的 JSON 版本：

"products": {
    "product": {
        "ticket_id": 65,
        "id": 5,
        "details": {
                "product_id": 1,
                "client_id": 96,
                "sold_by": 6,
                "product_price": 13000,
                "sold_from_date": 1434459600,
                "sold_to_date": 1444741200
        }
    }
}

我假设65与ticket_id相关，并且5对应于id。因此，我能够在HTML中使用数据的正确JSON表示：

<div ng-repeat="product in products">
    {{product.ticket_id}}-{{product.id}}
    <div ng-repeat="(key,value) in product.details">
        {{key}}:{{value}}
    </div>
</div>

保持 JSON 结构整齐将始终使您的编码更容易。

在我看来，

product1是：

           {
            "5": {
                "id": 5,
                "product_id": 1,
                "client_id": 96,
                "ticket_id": 65,
                "sold_by": 6,
                "product_price": 13000,
                "sold_from_date": 1434459600,
                "sold_to_date": 1444741200
            }

然后产品 2 是：

{
                "id": 5,
                "product_id": 1,
                "client_id": 96,
                "ticket_id": 65,
                "sold_by": 6,
                "product_price": 13000,
                "sold_from_date": 1434459600,
                "sold_to_date": 1444741200
            }

所以你不需要第三个ng重复。只需致电product2.product_price或任何您需要的东西。