Como carregar o json no meu angular.js ng-model?

Eu tenho o que eu acho que é provavelmente uma pergunta muito óbvia, mas não consegui encontrar uma resposta em nenhum lugar.

Eu estou apenas tentando carregar alguns dados JSON do meu servidor para o cliente. No momento, estou usando o JQuery para carregá-lo com uma chamada AJAX (código abaixo).

 var global = new Array(); $.ajax({ url: "/json", success: function(reports){ global = reports; return global; } });  

Isso está localizado no arquivo html. Funciona até agora, mas a questão é que eu quero usar o AngularJS. Agora, enquanto Angular PODE usar as variables, eu não posso carregar a coisa toda em uma variável, então eu posso usar um para cada loop. Isso parece estar relacionado ao “$ Scope”, que geralmente está localizado no arquivo .js.

O problema é que não consigo carregar o código de outras páginas em um arquivo .js. Cada exemplo de Angular mostra apenas coisas como esta:

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

Então, isso é útil, se IA) Quer digitar tudo isso à mão, E B) Se eu souber de antemão quais são todos os meus dados …

Não sei de antemão (os dados são dynamics) e não quero digitá-los.

Então, quando eu tentei mudar a chamada AJAX para Angular usando $ Resource, não parece funcionar. Talvez eu não consiga descobrir, mas é uma solicitação GET relativamente simples para dados JSON.

tl: dr Não consigo fazer chamadas AJAX para trabalhar para carregar dados externos em um modelo angular.

Como Kris menciona, você pode usar o serviço $resource para interagir com o servidor, mas tenho a impressão de que está iniciando sua jornada com o Angular – eu estava lá na semana passada – então recomendo começar a experimentar diretamente com o serviço $http . Nesse caso, você pode chamar seu método get .

Se você tiver o seguinte JSON

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

Você pode carregá-lo assim

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

O método get retorna um object de promise cujo primeiro argumento é um retorno de chamada de sucesso e o segundo, um retorno de chamada de erro .

Quando você adiciona $http como parâmetro de uma function, Angular faz mágica e injeta o recurso $http em seu controlador.

Eu coloquei alguns exemplos aqui

Veja um exemplo simples de como carregar dados JSON em um modelo angular.

Eu tenho um serviço web JSON ‘GET’ que retorna uma lista de detalhes do cliente, de uma cópia on-line do database Northwind SQL Server da Microsoft.

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

Ele retorna alguns dados JSON que se parecem com isso:

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

..e eu quero preencher uma lista suspensa com esses dados, para ficar assim …

Captura de tela angular

Eu quero que o texto de cada item venha do campo “CompanyName” e o ID venha dos campos “CustomerID”.

Como eu faria isso?

Meu controlador Angular ficaria assim:

 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 }); } 

… que preenche uma variável “listOfCustomers” com esse dataset JSON.

Então, na minha página HTML, eu usaria isso:

 
Please select a customer:

E é isso. Agora podemos ver uma lista de nossos dados JSON em uma página da Web, pronta para ser usada.

A chave para isso está na tag “ng-options”:

 customer.CustomerID as customer.CompanyName for customer in listOfCustomers 

É uma syntax estranha para dar uma olhada!

Quando o usuário seleciona um item nesta lista, a variável “$ scope.selectedCustomer” será definida como o ID (o campo CustomerID) desse registro do Cliente.

O script completo para este exemplo pode ser encontrado aqui:

Dados JSON com Angular

Mike

Eu uso o seguinte código, encontrado em algum lugar na internet, mas não me lembro da 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);