How to access Nested JSON Data via Index, Angular JS, ng-click?

Question

I have a List of cars assigned to a person for a particular month. If you search April you will get April data. How do I access Nested JSON data via Index?

Here's plunker

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

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

      "April": [{
            "Name": "Tim",
                "Address": "Street",
                "Phone": "111",
                "Status": "Speeding",
                "cars": [
                  {
                    "Make": "Honda",
                    "Year": "2000"
                   }, 
                  {
                    "Make": "Ford",
                    "Year": "2010"
                  },
                  {
                    "Make": "Toyota",
                    "Year": "2004"
                  }

            ]},

Hi, what do you mean nested JSON by index, you mean an array inside an object? Like obj = {array: [1,2,3,4]} ? — Martin E. Zulliger
– Martin E. Zulliger, Commented May 5, 2015 at 22:35

yangli-io · Accepted Answer · 2015-05-05 23:12:14Z

4

Theres a few things you should first

Change the button type to button, otherwise it might assume submit
Beautify your code http://jsbeautifier.org/

Now to the code, you should really simplify your logic. Your data structure is all there and you haven't changed it much every time you search for something, so theres no need to map or loop the data - you should only need that if you need to do something with the data.

Your click button function can be as simple as

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

Change ur showCars function to

$scope.showCars = function(car) {
    $scope.cars = car;
};

in your html simply change the showCars function call to

<td ng-click='showCars($index)'>{{result.name}}</td>

Remove this, you wont need it

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

EDIT

Heres the result http://plnkr.co/edit/LGytByq0d3a7AORxXsHa?p=preview

edited May 5, 2015 at 23:12

answered May 5, 2015 at 22:57

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Angular_Newbie Over a year ago

Thanks Yang. I tried that but it didn't work. I'll keep at it.

yangli-io Over a year ago

Opps, I've given you the wrong plunk, check the updated answer @Angular_Newbie

Collectives™ on Stack Overflow

How to access Nested JSON Data via Index, Angular JS, ng-click?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related