如何访问嵌套的JSON数据？

Question

I'm having trouble displaying Nested JSON with ng-repeat. I have a List of cars assigned to a person for a particular month. If you search April you will get April data. Click on the Name and it should populate Car section. Here's pluker . I have two functions one for the search button and the other for row click. Can someone tell me the proper way to push the nested car info? Car info is in Results.

    $scope.results = [];
    $scope.clickButton = function (enteredValue) {

    $scope.items = $scope.info;


    angular.forEach($scope.items[enteredValue], function (item, key) {
        $scope.results.push({
                 name: item.Name,
                 address: item.Address,
                 phone: item.Phone, 
                 status: item.Status,
                 cars:item.Cars
             });
     });
    };

   $scope.cars = [];

   $scope.clickButton2 = function () {

    $scope.rowItems = $scope.info.Cars;

    angular.forEach($scope.rowItems, function(car, key){
        $scope.cars.push({

            vehicleMake: car.Make,
                vehicleYear: car.Year
        });
         });
};

Answer 1

The easiest way to implement this is by leveraging the $index scope variable set by ngRepeat (see the docs ). This lets you pass the index of the result item to the controller method so that it knows which result to read the cars from:

<tr ng-repeat="result in results">
  <td ng-click='showCars($index)'>{{result.name}}</td>
  <td>{{result.address}}</td>
  <td>{{result.phone}}</td>
  <td>{{result.status}}</td>
</tr>

You can then use the index like this:

$scope.showCars = function(resultIndex) {
  $scope.cars = $scope.results[resultIndex].cars;
}

And finally display $scope.cars on the page:

<table>
  <tr>
    <th>Car</th>
    <th>Year</th>
  </tr>
  <tr ng-repeat="car in cars">
    <td>{{Make}}</td>
    <td>{{Year}}</td>
  </tr>
</table>

---

One more thing: for array transformations such as the attribute lower-casing in your example code, consider using the Array map() method instead of angular.forEach() . Here is an example:

$scope.cars = $scope.results[resultIndex].cars.map(function(car) {
  return {
    make: car.Make,
    year: car.Year
  };
};