Parse JSON file with arrays using AngularJS

Question

I'm not sure how to iterate through this JSON data with help of AngularJS

{       
   {
      "1590": {
      "id": "1590",
      "id_site": "0",
      "id_merk": "7",
      "id_type": "209",
      "uitvoering": "Blue Lease Execut. HYbrid4 2.0 HDi 4D 147kW"
   },
   {
      "1590": {
      "id": "1590",
      "id_site": "0",
      "id_merk": "7",
      "id_type": "209",
      "uitvoering": "Blue Lease Execut. HYbrid4 2.0 HDi 4D 147kW"
   }
}

This is what I have in my Angular app right now:

Service:

(function () {

    var releasingService = function ($http) {

        var brands = [];
        $http.get('/releasing.json')
            .then(function(results) {
                brands = results;

        });

        this.getBrands = function () {
        return brands;
      };

   };

   releasingService.$inject = ['$http'];

   angular.module('releasingApp').service('releasingService', releasingService);

}());

View

<select data-ng-model="brands" data-ng-options="brand.Id for brand in brands">
   <option value="">-- Selecteer een merk --</option>
</select>

Currently the view shows no results. I don't know how to address the different objects from the array.

Any help would be appreciated.

Doesnt look like a valid json with the { { } },did you write what the json look like correctly? — mpm
– mpm, Commented May 15, 2014 at 14:16
Yes, this is actually what the JSON looks like when I request it from the server. So I can't change the output myself. — Daniel Plomp
– Daniel Plomp, Commented May 15, 2014 at 18:35

Maxim Shoustin · Accepted Answer · 2014-05-15 14:43:53Z

You can't iterate over your JSON since it represented not as array but Object.

Set braces like:

[
  {
    "1590": {
      "id": "1590",
      "id_site": "0",
      "id_merk": "7",
      "id_type": "209",
      "uitvoering": "Blue Lease Execut. HYbrid4 2.0 HDi 4D 147kW"
    }
  },
  {
    "1590": {
      "id": "1590",
      "id_site": "0",
      "id_merk": "7",
      "id_type": "209",
      "uitvoering": "Blue Lease Execut. HYbrid4 2.0 HDi 4D 147kW"
    }
  }
]

The second option is key-value presentation:

{
  "1590": {
    "id": "1590",
    "id_site": "0",
    "id_merk": "7",
    "id_type": "209",
    "uitvoering": "Blue Lease Execut. HYbrid4 2.0 HDi 4D 147kW"
  },
  "1591": {
    "id": "1591",
    "id_site": "0",
    "id_merk": "7",
    "id_type": "201",
    "uitvoering": "Blue Lease Execut. HYbrid4 2.0 HDi 4D 142kW"
  }
}

So HTML should be like:

<select data-ng-model="selectedItem" 
        data-ng-options="key as value.uitvoering  for (key , value) in brands">
   <option value="">-- Selecteer een merk --</option>
</select>

See Demo in Fiddle

Helper You can use this online helper: jsoneditoronline

jackypan1989 · Accepted Answer · 2014-05-15 14:58:38Z

1

I write an example for you: plnkr

First, the json you provided is not a valid json. Based on the structure you may have to change the expression in ng-options. And then, I recommend you return the $http promise to controller and parse the result after doing ajax. Finally, you render the result to the select element. I hope this will help you. You can also see the api doc ng on select if you want more detail of select options.

answered May 15, 2014 at 14:58

jackypan1989

2,8661 gold badge15 silver badges11 bronze badges

Collectives™ on Stack Overflow

Parse JSON file with arrays using AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related