How to load json into my angular.js ng-model?
As Kris mentions, you can use the $resource
service to interact with the server, but I get the impression you are beginning your journey with Angular - I was there last week - so I recommend to start experimenting directly with the $http
service. In this case you can call its get
method.
If you have the following JSON
[{ "text":"learn angular", "done":true }, { "text":"build an angular app", "done":false}, { "text":"something", "done":false }, { "text":"another todo", "done":true }]
You can load it like this
var App = angular.module('App', []);App.controller('TodoCtrl', function($scope, $http) { $http.get('todos.json') .then(function(res){ $scope.todos = res.data; });});
The get
method returns a promise object whichfirst argument is a success callback and the second an errorcallback.
When you add $http
as a parameter of a function Angular does it magicand injects the $http
resource into your controller.
I've put some examples here
Here's a simple example of how to load JSON data into an Angular model.
I have a JSON 'GET' web service which returns a list of Customer details, from an online copy of Microsoft's Northwind SQL Server database.
http://www.iNorthwind.com/Service1.svc/getAllCustomers
It returns some JSON data which looks like this:
{ "GetAllCustomersResult" : [ { "CompanyName": "Alfreds Futterkiste", "CustomerID": "ALFKI" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "CustomerID": "ANATR" }, { "CompanyName": "Antonio Moreno TaquerÃa", "CustomerID": "ANTON" } ] }
..and I want to populate a drop down list with this data, to look like this...
I want the text of each item to come from the "CompanyName" field, and the ID to come from the "CustomerID" fields.
How would I do it ?
My Angular controller would look like this:
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 });}
... which fills a "listOfCustomers" variable with this set of JSON data.
Then, in my HTML page, I'd use this:
<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>
And that's it. We can now see a list of our JSON data on a web page, ready to be used.
The key to this is in the "ng-options" tag:
customer.CustomerID as customer.CompanyName for customer in listOfCustomers
It's a strange syntax to get your head around !
When the user selects an item in this list, the "$scope.selectedCustomer" variable will be set to the ID (the CustomerID field) of that Customer record.
The full script for this example can be found here:
Mike
I use following code, found somewhere in the internet don't remember the source though.
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);