How to fill select from Json file in angular

Question

I'm quite new with Angular,and I'm facing some problems when trying to bind values of a Json file into a select form.I've read lot of solutions and I used all of them but I don't know why it does not display me anything.I take the Json file with an $http.get,I put this file into a variable and I try to access one element and all is ok,so the file is taken in the rigth way. The Json is this one:

{
"regioni": [
    {
        "province": [
            {
                "code": "CH", 
                "comuni": [
                    {
                        "code": "069001", 
                        "cap": "66040", 
                        "nome": "Altino"
                    }, 
                    {
                        "code": "069002", 
                        "cap": "66044", 
                        "nome": "Archi"
                    } 
     ], 
                "nome": "Chieti"
            }
   ], 
        "nome": "Abruzzo"
    }
 ]
}

So I have an array of region containing a property nome and a property province which is an array containing code,nome,and an array of comuni composed by code,cap,nome. I want to display every name of all comuni of all province. The controller is this one:

var app = angular.module("myCreation",[]);
app.controller("myStructureCtrl",['$scope','$http',function($scope,$http){
var comuniList = null;

 $http.get('/resources/italia_comuni.json')
     .then(function(response){
        comuni = response.data;
  });

}]);

The HTML :

<div id='selectCity'  style='width:30%;margin-top: 60px'>
        <label for='city'>Select a city</label> 
        <select name="city" id='city' ng-model="data.city" ng-options="regioni.province.comuni.nome for city in comuniList">
        </select> 
    </div>

I don't know exactly how to take that value but I hoped this worked. Thanks in advance.

younes sofiane · Accepted Answer · 2016-03-10 15:59:01Z

1

First of all, in the $http response, it's regioni which receives the data like this:

 $http.get('/resources/italia_comuni.json')
 .then(function(response){
    $scope.regioni = response.data;
 });

then you should write ng-options like this:

ng-options="c.nome for c in regioni[0].province[0].comuni"

check this link http://plnkr.co/edit/cSY0GY6E7zRCbZm14Zps?p=preview

edited Mar 10, 2016 at 15:59

answered Mar 10, 2016 at 0:26

younes sofiane

4411 gold badge8 silver badges23 bronze badges

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

2 Comments

Mirko Over a year ago

Ok,this work ,but if I have that regioni and province have not a single element? I mean,the arrays of regioni and province may be with "n" element,how can I iterate?

younes sofiane Over a year ago

Well in that case, I guess you should create a list inside the controller with all the names of the comuni and then adding it to the ng-options

Bart1612 · Accepted Answer · 2016-03-10 00:47:43Z

1

Yes, it's like younes sofiane said: to actually take advantage of the response you should use the $scope.regioni instead of a regular javascript variable.

Take a look at this example:

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

Now the html:

<div ng-controller="GreetingController">
  {{ greeting }}
</div>

To understand this better, take a look at the angular developer guide on the basics: https://docs.angularjs.org/guide/controller

answered Mar 10, 2016 at 0:47

Bart1612

1782 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to fill select from Json file in angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related