CODEWITHSUNDEEP
jsonangularjsangularjs-ng-repeatarrays
Daniel Plomp
Daniel Plomp

Reputation: 174

Parse JSON file with arrays using AngularJS

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.

Upvotes: 2

Views: 2942

Answers (2)

jackypan1989
jackypan1989

Reputation: 2866

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.

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

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

Upvotes: 2

Related Questions