如何访问AngularJs中的嵌套Json对象

How to access nested Json objects in AngularJs

本文关键字：嵌套 Json 对象 AngularJs 何访问 访问      更新时间：2024-02-19

我使用AngularJs/Laravel应用程序。我尝试访问每个制造中的项目。事实上，我无法打印出整个制作对象，但我想知道如何访问这些项目，以便通过它们循环并显示每个项目。

这是我的Php控制器，它发送Json数据

public function show($id)
{
    $facture = Facture::where('id', '=', $id)->with('items')->get();
    return Response::json($facture);
}

这是我的简化AngularJs控制器

$http.get('api/factures/' + $stateParams.factureId).success(function(data) {
  $scope.facture = data;
});

实际上

{{manufacture|json}}
打印出的是： 
[
  {
    "id": 10200,
    "client_id": 1,
    "lead_id": 1,
    "courtedescription": "Description test",
    "etat": "En attente",
    "created_at": "2014-12-30 10:01:46",
    "updated_at": "2014-12-30 10:01:46",
    "items": [
      {
        "id": 1,
        "facture_id": 10200,
        "description": "Item numéro 1",
        "prix": "15.00",
        "tps": "0.75",
        "tvq": "1.50",
        "grandtotal": "17.25",
        "created_at": "2014-12-30 10:01:46",
        "updated_at": "2014-12-30 10:01:46"
      },
      {
        "id": 2,
        "facture_id": 10200,
        "description": "Deuxième item quoi",
        "prix": "135.00",
        "tps": "6.75",
        "tvq": "13.47",
        "grandtotal": "155.22",
        "created_at": "2014-12-30 10:01:46",
        "updated_at": "2014-12-30 10:01:46"
      }
    ]
  }
]

以下是一个简化的Plunkr，重点介绍基本功能：http://plnkr.co/edit/fZmb4fAX0GJCDH2cpxwQ?p=preview

我如何访问这些项目？

您可以将函数值用作普通数组，因为它在视图范围内。

例如，如果你想要数组中第一个对象的id，你可以使用下面的

{{facture[0].id |json}}

如果您想在每个值上循环，请签出https://docs.angularjs.org/api/ng/directive/ngRepeat

希望这能有所帮助！

相关文章：