As a newcomer to Angular, I am encountering some difficulties when attempting to bind values from a JSON file into a select form. Despite trying various solutions I found online, I am still unable to display anything. I am able to successfully retrieve the JSON file using $http.get, store it in a variable, and access its elements individually without any issues, which indicates that the file is being fetched correctly. The JSON data structure is as follows:
{
"regioni": [
{
"province": [
{
"code": "CH",
"comuni": [
{
"code": "069001",
"cap": "66040",
"nome": "Altino"
},
{
"code": "069002",
"cap": "66044",
"nome": "Archi"
}
],
"nome": "Chieti"
}
],
"nome": "Abruzzo"
}
]
}
Within the array of regions, each item contains a property nome and an array called province, which comprises properties like code, nome, and another array called comuni consisting of code, cap, and nome. My goal is to display the names of all comuni from all province. The controller function looks like this:
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 corresponding HTML code is:
<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 am uncertain about the exact way to retrieve and display the desired value, but I am hopeful that the current setup will work. Any guidance on this matter would be greatly appreciated. Thank you in advance.