Cómo cargar json en mi angular.js ng-model?
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>
Esto se encuentra en el archivo html. Funciona hasta ahora, pero el problema es que quiero usar AngularJS. Ahora, mientras Angular PUEDE utilizar las variables, no puedo cargar todo en una variable así que puedo utilizar un para cada bucle. Esto parece estar relacionado con el "Scope Scope", que generalmente se encuentra en el .archivo js.
El problema es que no puedo cargar código de otras páginas en a .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}];
Por lo tanto, esto es útil, si I A) Quiere escribir todo esto a mano, Y B) Si conozco 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 Resource, no parece funcionar. Tal vez no puedo entenderlo, 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 answers
Como menciona Kris, puede usar el servicio $resource 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 servicio $http. En este caso puede llamar a su método get.
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 método get devuelve un objeto promise que
el primer argumento es un éxito callback y el segundo an error
callback.
Cuando se agrega $http como parámetro de una función Angular hace magia
e inyecta el recurso $http en su controlador.
He puesto algunos ejemplos aquí
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-23 13:17:44
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 llenar una lista desplegable con estos datos, para que se vea como este...
Quiero que el texto de cada elemento provenga del campo "CompanyName", y el ID 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.
Entonces, 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 todo. Ahora podemos ver una lista de nuestros datos JSON en una página web, lista para ser utilizar.
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 obtener su cabeza alrededor !
Cuando el usuario selecciona un elemento en esta lista, el "scope scope.La variable" selectedCustomer " se establecerá en el ID (el campo CustomerID) de ese registro de cliente.
El script completo para este ejemplo se puede encontrar aquí:
Mike
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-16 09:39:56
Uso el siguiente código, encontrado 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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-17 23:53:13