Доступ к сложным данным JSON в Angularjs

Question

Я пытаюсь отобразить данные json в формате html с помощью ng-repeat, я смог получить данные, но некоторые из них я не смог из-за объектов в структуре объектов.Пример: "Obj => Obj => Obj" своего рода.

В объекте json ниже я получил доступ к objs в "Color", но мне нужна помощь, чтобы получить доступ к objs в "сиденье "и" двигатель "!.Я думаю, что если бы ng-repeat повторял, что объект «seat», вероятно, сделал бы то же самое для «двигателя».

Я сделал так: ng-repeat = "c in datasource" первый шаг.Далее в тд я сделал ng-repeat =" allcolor in c.Color", чтобы получить данные этого "цвета".

Теперь в другом тд я хочу получить данные об объектах в "месте", как мне это сделать?

Пример: ng-repeat = "seatobjs in allcolor.seat" не работает.

<tr ng-repeat = "c in datasource">
<td>{{c.Name}}</td>
<td>{{c.From}}</td>
<td ><p ng-repeat="allcolor in c.Color> 
     {{allcolor.Name}}</p></td>
<td><p ng-repeat="seatobjs in allcolor.seat"> //need help here
     {{seatobjs.Name}}</p></td>
<td><button type="button" ng-disabled="!(check)">Edit</button></td>
</tr>

Спасибо

[ 
   { 
    "Name": "Car",
    "From": "2019-06-26", 
    "Tom": "2019-12-31",
    "Color": [ 
        { 
            "Name": "Green",             
            "From": "2019-06-26",  
            "Tom": "2019-12-31",
            "seat": [ 
              { 
                "Name": "Yello",                  
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              },
              { 
                "Name": "Green",              
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ],
            "engine": [     
              { 
                "Name": "Brown",                 
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ]
        }
    ]
   },
   { 
    "Name": "Car",
    "From": "2019-06-26", 
    "Tom": "2019-12-31",
    "Color": [     
        { 
            "Name": "Red",             
            "From": "2019-06-26", 
            "Tom": "2019-12-31",
            "tyre": [       
              { 
                "Name": "Yello",                  
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              },
              { 
                "Name": "Green",              
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ],
            "engine": [ 
              { 
                "Name": "Black",                 
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ]
        }
    ]
   },
]

Answer 1

С помощью директивы ngRepeat вы можете перебирать свойства объекта. Это синтаксис:

<div ng-repeat="(key, value) in myObj">…</div>

Следующий код перебирает некоторые свойства вашего JSON и связывает их внутри таблицы:

var carApp = angular.module('carApp', []);
carApp.controller('CarController', function CarController($scope) {
  $scope.cars = [{
      "Name": "Car",
      "From": "2019-06-26",
      "Tom": "2019-12-31",
      "Color": [{
        "Name": "Green",
        "From": "2019-06-26",
        "Tom": "2019-12-31",
        "seat": [{
            "Name": "Yello",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          },
          {
            "Name": "Green",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          }
        ],
        "engine": [{
          "Name": "Brown",
          "From": "2019-06-26",
          "Tom": "2019-12-31"
        }]
      }]
    },
    {
      "Name": "Car",
      "From": "2019-06-26",
      "Tom": "2019-12-31",
      "Color": [{
        "Name": "Red",
        "From": "2019-06-26",
        "Tom": "2019-12-31",
        "tyre": [{
            "Name": "Yello",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          },
          {
            "Name": "Green",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          }
        ],
        "engine": [{
          "Name": "Black",
          "From": "2019-06-26",
          "Tom": "2019-12-31"
        }]
      }]
    },
  ];
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="carApp">
  <div ng-controller="CarController">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Seat</th>
          <th>Tyre</th>
          <th>Engine</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="car in cars">
          <td>{{car.Name}}</td>
          <td>
            <span>{{car.Color[0].Name}}</span>
          </td>
          <td>
            <ul>
              <li ng-repeat="seat in car.Color[0].seat">{{seat.Name}}</li>
            </ul>
          </td>
          <td>
            <ul>
              <li ng-repeat="tyre in car.Color[0].tyre">{{tyre.Name}}</li>
            </ul>
          </td>
          <td>{{car.Color[0].engine[0].Name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

allcolor недоступен элементам, которые находятся за пределами ng-repeat определенного элемента.С вашей заданной HTML-разметкой вы можете захотеть снова использовать ng-repeat для нового td и места доступа следующим образом.

<tr ng-repeat = "c in datasource">
    <td>{{c.Name}}</td>
    <td>{{c.From}}</td>
    <td ><p ng-repeat="allcolor in c.Color> 
        {{allcolor.Name}}</p>
    </td>
    <td ng-repeat =" allcolor2 in c.Color">
        <p ng-repeat="seatobjs in allcolor2.seat">{{seatobjs.Name}}</p>
    </td>
    <td><button type="button" ng-disabled="!(check)">Edit</button></td>
</tr>

Answer 3

Попробуйте это

ng-repeat = "seatobjs in allcolor['seat']"