Come caricare json nel mio angular.js ng-model?

Ho quella che penso sia una domanda molto ovvia, ma non sono riuscito a trovare una risposta da nessuna parte.

Sto solo cercando di caricare alcuni dati JSON dal mio server nel client. In questo momento, sto usando JQuery per caricarlo con una chiamata AJAX (codice sotto).

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

Si trova nel file html. Finora funziona, ma il problema è che voglio usare AngularJS. Ora, mentre Angular PU utilizzare le variabili, non posso caricare l'intera cosa in una variabile, quindi posso usare un per ogni ciclo. Questo sembra essere correlato a "$ Scope", che di solito si trova nel file .js.

Il problema è che non riesco a caricare il codice da altre pagine in un file .js. Ogni esempio di Angular mostra solo cose come questa:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

Quindi, questo è utile, se IA) Voglio scrivere tutto questo a mano, E B) Se so in anticipo quali sono tutti i miei dati ...

Non lo so in anticipo (i dati sono dinamici) e non voglio digitarli.

Quindi, quando ho provato a cambiare la chiamata AJAX in Angular usando $ Resource, non sembra funzionare. Forse non riesco a capirlo, ma è una richiesta GET relativamente semplice per i dati JSON.

tl: dr Non riesco a far funzionare le chiamate AJAX per caricare dati esterni in un modello angolare.

Come dice Kris, puoi utilizzare il $resourceservizio per interagire con il server, ma ho l'impressione che tu stia iniziando il tuo viaggio con Angular - ci sono stato la scorsa settimana - quindi consiglio di iniziare a sperimentare direttamente con il $httpservizio. In questo caso puoi chiamare il suo getmetodo.

Se hai il seguente file JSON

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Puoi caricarlo in questo modo

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

Il getmetodo restituisce un oggetto promessa il cui primo argomento è un callback di successo e il secondo un callback di errore .

Quando aggiungi $httpcome parametro di una funzione Angular fa magia e inietta la $httprisorsa nel tuo controller.

Ho messo alcuni esempi qui

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

Ecco un semplice esempio di come caricare i dati JSON in un modello angolare.

Ho un servizio Web JSON "GET" che restituisce un elenco di dettagli del cliente, da una copia online del database Northwind SQL Server di Microsoft .

http://www.iNorthwind.com/Service1.svc/getAllCustomers

Restituisce alcuni dati JSON che assomigliano a questo:

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..e voglio compilare un elenco a discesa con questi dati, in modo che assomigli a questo ...

Desidero che il testo di ogni articolo provenga dal campo "CompanyName" e che l'ID provenga dai campi "CustomerID".

Come lo farei?

Il mio controller Angular sarebbe simile a questo:

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

... che riempie una variabile "listOfCustomers" con questo set di dati JSON.

Quindi, nella mia pagina HTML, userei questo:

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

E questo è tutto. Ora possiamo vedere un elenco dei nostri dati JSON su una pagina web, pronto per essere utilizzato.

La chiave per questo è nel tag "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

È una strana sintassi per farti girare la testa!

Quando l'utente seleziona un elemento in questo elenco, la variabile "$ scope.selectedCustomer" verrà impostata sull'ID (il campo CustomerID) di quel record del cliente.

Lo script completo per questo esempio può essere trovato qui:

Dati JSON con Angular

Mike

Uso il seguente codice, trovato da qualche parte in Internet non ricordo però la fonte.

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);