¿Cómo cargar json en mi modelo angular.js ng?


114

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

Solo estoy tratando de 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>

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

El problema es que no puedo cargar 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) Quiero escribir todo esto a mano, Y B) Si sé de antemano cuáles son todos mis datos ...

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

Entonces, cuando intenté cambiar la llamada AJAX a Angular usando $ Resource, no parece funcionar. Tal vez 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.


3
¿Podemos ver su intento de usar $ Resource? Debería funcionar, así que quizás sea más fácil si lo ayudamos a depurar eso ...
Kris Jenkins

Respuestas:


189

Como menciona Kris, puede usar el $resourceservicio para interactuar con el servidor, pero tengo la impresión de que está comenzando su viaje con Angular (estuve allí la semana pasada), así que recomiendo comenzar a experimentar directamente con el $httpservicio. En este caso, puede llamar a su getmétodo.

Si tiene 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 getmétodo devuelve un objeto de promesa cuyo primer argumento es una devolución de llamada exitosa y el segundo una devolución de llamada de error .

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

He puesto algunos ejemplos aquí


muchas gracias, codeterminé usando el servicio $ http en su lugar ... aunque de una manera ligeramente diferente ... $ http.get ('/ json'). success (function (response) {$ scope.reports = response; getData (); code lo que es interesante para mí, es el objeto de promesa ... Realmente quiero aprender más sobre eso. Me encanta la idea. El otro problema que he tenido es básicamente ejecutar un bucle en la solicitud ajax, así que Puedo actualizar constantemente la página "automágicamente". $ timeout no me ha funcionado.
MJR_III

1
Creo que debería ser $ scope.todos = res; en lugar de res.data.
Anoyz

El objeto de respuesta tiene cuatro propiedades: config, data, headersy status. Los valores de la datapropiedad son los que desea.
jaime

1
vale la pena tener un $ scope.todos = []; antes de la solicitud http, por lo que al menos tiene una estructura vacía predeterminada para no arrojar errores en su plantilla.
S ..

1
re: $scope.todos = res;o $scope.todos = res.data;- la diferencia es si estás en a .then(response)o en .success(result) The .successse da response.datamientras que .thense da el completo response.
Jesse Chisholm

28

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, 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 completar una lista desplegable con estos datos, para que se vea así ...

Captura de pantalla angular

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, lista para ser utilizada.

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

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

¡Es una sintaxis extraña para entenderlo!

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

El script completo para este ejemplo se puede encontrar aquí:

Datos JSON con Angular

Miguel


¿Funciona esto realmente? Su JSON no es válido (las claves no están entre comillas). ¿No obtienes errores?
CodyBugstein

Lo siento, tienes razón. Tomé la captura de pantalla anterior de Google Chrome con el excelente complemento JSONView instalado (para que pueda ver el JSON con un formato agradable). Pero sí, el JSON de mi servicio web es válido. Si hace clic en el enlace de mi artículo, puede ver una versión en vivo de este código.
Mike Gledhill

¿Funciona? Creo que deberían ser datos
GetAllCustomersResult

Vaya, tienes toda la razón. Había cambiado el servicio web para incluir el ajuste de los resultados JSON en "GetAllCustomersResult", así que sí, esto es necesario. Actualicé la muestra de código. Gracias por el aviso.
Mike Gledhill

0

Utilizo el siguiente código, que se encuentra en algún lugar de Internet, aunque 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);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.