javascript - leer - Cómo cargar json en mi angular.js ng-model?

json to array angular

Question

Tengo lo que creo que es probablemente una pregunta muy obvia, pero no pude encontrar una respuesta en ninguna parte.

Solo intento cargar algunos datos JSON de mi servidor en el cliente. En este momento, estoy usando JQuery para cargarlo con una llamada AJAX (código a continuación).

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

Esto se encuentra en el archivo html. Funciona hasta ahora, pero el problema es que quiero usar AngularJS. Ahora, aunque Angular PUEDE usar las variables, no puedo cargar todo en una variable, así que puedo usar una para cada ciclo. Esto parece estar relacionado con el "$ Scope", que generalmente se encuentra en el archivo .js.

El problema es que no puedo cargar el código de otras páginas en un archivo .js. Cada ejemplo de Angular solo muestra cosas como esta:

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

Entonces, esto es útil, si IA) Quiere escribir todo esto a mano, Y B) Si sé de antemano cuales son mis datos ...

No sé de antemano (los datos son dinámicos) y no quiero escribirlo.

Entonces, cuando intenté cambiar la llamada de AJAX a Angular usando $ Resource, parece que no funciona. Quizás no pueda resolverlo, pero es una solicitud GET relativamente simple para datos JSON.

tl: dr No puedo hacer que las llamadas AJAX funcionen para cargar datos externos en un modelo angular.

Answer 1

Aquí hay un ejemplo simple de cómo cargar datos JSON en un modelo angular.

Tengo un servicio web JSON ''GET'' que devuelve una lista de detalles del Cliente, a partir de una copia en línea de la base de datos Northwind SQL Server de Microsoft.

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

Devuelve algunos datos JSON que se ven así:

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

..y quiero llenar una lista desplegable con esta información, para que se vea así ...

Quiero que el texto de cada elemento provenga del campo "CompanyName" y que el ID provenga de los campos "CustomerID".

¿Cómo lo haría?

Mi controlador angular se vería así:

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 llena una variable "listOfCustomers" con este conjunto de datos JSON.

Luego, en mi página HTML, usaría esto:

<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>

Y eso es. Ahora podemos ver una lista de nuestros datos JSON en una página web, listos para ser utilizados.

La clave para esto está en la etiqueta "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

¡Es una sintaxis extraña para entender!

Cuando el usuario selecciona un elemento en esta lista, la variable "$ scope.selectedCustomer" se establecerá en la ID (el campo CustomerID) de ese registro del Cliente.

La secuencia de comandos completa para este ejemplo se puede encontrar aquí:

Datos JSON con Angular

Micro

Answer 2

Como Kris menciona, puedes usar el servicio de $resource para interactuar con el servidor, pero me da la impresión de que comienzas tu viaje con Angular, estuve allí la semana pasada, así que te recomiendo comenzar a experimentar directamente con el servicio de $http . En este caso, puede llamar a su método get .

Si tienes el siguiente JSON

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

Puedes cargarlo así

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

El método get devuelve un objeto de promesa cuyo primer argumento es una devolución de llamada correcta y el segundo una devolución de llamada de error .

Cuando agrega $http como parámetro de una función, Angular lo hace mágico e inyecta el recurso $http en su controlador.

He puesto algunos ejemplos aquí

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

Answer 3

Utilizo el siguiente código, encontrado en algún lugar de Internet, pero no recuerdo la fuente.

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