AngularJS显示复杂对象

Question

i have the following JSON:

{
   "_id": "543e95d78a1cec2a38ed53ec",
   "result": {
      "CAR009": [
         {
            "name": "BMW"
         },
         {
            "name": "MERCEDES"
         }
      ],
      "BUS007": [
         {
            "name": "RENAULT"
         }
      ]
   }
}

I don't know in advance "CAR009" and "BUS007" is just for the example.

I want it to display in my HTML:

CAR009 : BMW, MERCEDES

BUS008 : RENAULT

Controller:

$http.get('http://localhost:3000/categories/api)
  .success(function (cars) {
       var categoArray = [];
       for (var key in cars.result) {
          var car = cars.result[key];
          for (var idx in car) {
             categoArray.push(car[idx].category_name);
          }
        }

        $scope.categories = categoArray;
    })
   .error(function (cars) {
      console.log(tags);
});

Then in my HTML : (but it is not exactly what I want)

<div ng-repeat="categorie in categories">
       <li>{{categorie}}
</div>

I store in an array but I need to store in an Object ?

How I can do that to make it easier to diplay this with AngularJS?

Thanks for your help !

Answer 1

Assuming that categories has this structure:

    {
      "CAR009": [
         {
            "name": "BMW"
         },
         {
            "name": "MERCEDES"
         }
      ],
      "BUS007": [
         {
            "name": "RENAULT"
         }
      ]
   }

You want to do it like this:

<ul>
   <li ng-repeat="(key, cars) in categories">
       {{key}}: <span ng-repeat="car in cars">{{car.name}}{{!$last?', ':''}}</span>
   </li>
</ul>

Example

Also, you may want to change this part of your code:

$http.get('http://localhost:3000/categories/api')
  .success(function (cars) {
        $scope.categories = cars.result;
    })
   .error(function (cars) {
      console.log(tags);
});