Corsi on-line

Lettura di file JSON da AngularJS

Uno degli utilizzi più interessanti del framework JavaScript AngularJS riguarda l’estrazione di informazioni da sorgenti di dati; in questo post verrà analizzato un semplice esempio pratico riguardante la lettura di un file basato sul formato d’interscambio JSON (JavaScript Object Notation), il prelevamento di dati da quest’ultimo e la loro visualizzazione in formato tabellare all’interno di una pagina HTML.

tbIniziamo subito dal file JSON che metterà a disposizione i dati da stampare a video, questi ultimi non saranno altro che una serie di nominativi associati alla città di residenza e alla nazione di appartenenza:

{
"dati": [
{
"Nome" : "Homer Simpson",
"Residenza" : "Springfield",
"Nazione" : "USA"
},
{
"Nome" : "Apu Nahasapeemapetilon",
"Residenza" : "Springfield",
"Nazione" : "India"
},
{
"Nome" : "Tony Ciccione",
"Residenza" : "Springfield",
"Nazione" : "Italia"
},

{
"Nome" : "Telespalla Mel",
"Residenza" : "Springfield",
"Nazione" : "USA"
}
]
}

Fatto questo sarà possibile passare al codice relativo ad AngularJS, quest’ultimo baserà il suo funzionamento su un controller, denominato arrayCtrl, che permetterà all’applicazione denominata showTable di rendere visibili i dati contenuti nel file JSON tramite la direttiva ng-repeat, inserita con il compito di istanziare un template per ogni elemento presente in una collection di dati; ciascuna istanza avrà il suo scope, nel nostro caso personaggi, e i record verranno estratti tramite degli appositi placeholder (x.Nome, x.Residenza e x.Nazione).

var table = angular.module('showTable', []);
table.controller('arrayCtrl', function($scope, $http) {
$http.get("array.json")
.success(function (response) {$scope.personaggi = response.dati;});
});

La porzione tabella all’interno della quale verranno stampati i dati sarà associata allo script JavaScript tramite la già citata direttiva ng-repeat:

<table>
<tr>
<th>Nome</th>
<th>Residenza</th>
<th>Nazione</th>
</tr>
<tr ng-repeat="x in personaggi">
<td>{{ x.Nome }}</td>
<td>{{ x.Residenza }}</td>
<td>{{ x.Nazione }}</td>
</tr>
</table>

Per comodità del lettore riportiamo il codice completo della pagina HTML per la visualizzazione dei dati, comprese le regole di stile CSS che si occuperanno della formattazione della tabella:

<!DOCTYPE html>
<html>
<head>
<title>Inserimento dati in tabella con AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<style>
table, th , td {
  border: 2px dashed #9eb0c7;
  padding: 4px;
}
table tr:nth-child(odd) {
  background-color: #b0c4de;
}
table tr:nth-child(even) {
  background-color: #fff;
}
</style>
</head>
<body>
<div ng-app="showTable" ng-controller="arrayCtrl"> 
<table>
<tr>
<th>Nome</th>
<th>Residenza</th>
<th>Nazione</th>
</tr>
<tr ng-repeat="x in personaggi">
<td>{{ x.Nome }}</td>
<td>{{ x.Residenza }}</td>
<td>{{ x.Nazione }}</td>
</tr>
</table>
</div>
<script>
var table = angular.module('showTable', []);
table.controller('arrayCtrl', function($scope, $http) {
    $http.get("array.json")
    .success(function (response) {$scope.personaggi = response.dati;});
});
</script>
</body>
</html>
Post correlati
I più letti del mese
Tematiche