current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 2 down vote favorite

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.

share|improve this question
    
Doesnt look like a valid json with the { { } },did you write what the json look like correctly? –  mpm May 15 '14 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 May 15 '14 at 18:35

2 Answers 2

up vote 2 down vote

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

share|improve this answer
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.