Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS - basic async request
var App = angular.module('App', []);
App.controller('TodoCtrl', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.todos = res.data;
});
});
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}} - <em>{{todo.done}}</em>
</li>
</ul>
</body>
</html>
[{ "text":"learn angular", "done":true },
{ "text":"build an angular app", "done":false},
{ "text":"something", "done":false },
{ "text":"another todo", "done":true }]
@geeklevel1000

This comment has been minimized.

Copy link

commented Sep 16, 2013

hey nice post! I'm an angular newbie and I assigned myself a little test, to help me learn angular. For learning, I'm creating an open source ruby on rails application that I will post on github when I finish the initial version. It's going to be an NFL Weekly Pickem using Ruby on Rails, AngularJS, and Twitter-Bootstrap . I feel like I can learn a ton building this project. Anyways! I was able to find a nice JSON file of the entire NFL 2013 schedule. I'm trying to figure out how to parse through it, because the JSON output has so many different hashed objects, inside of hashed objects, inside of more hashed objects. https://gist.github.com/egeriis/5420789 is the JSON I am working with. I have some snippets on plnkr of me trying to creating client objects with angular (I used your example above!). http://plnkr.co/edit/ZF939uiC3qemA9zqrlc3?p=preview I'm just trying to get a good feel of parsing and creating objects. Once I get that down, I have some UI bootstrap switch sliders/pickers that I want to users to click on for their weekly picks, and later I want to add some pagenation for each weeks pickem. With Rails I'll let people create their own pickem groups and manage user / group creations inside rails. That's later though, first I need to parse through this big JSON file locally in angularjs. Any advice is much appreciated!

update:
--yikes, I spent the past 2 hrs playing with it, doing ng-repeat inside the next object, I think I got it working somewhat to what I want. I keep playing with it http://plnkr.co/edit/ZF939uiC3qemA9zqrlc3?p=preview if you ever happened to have time and look at it let me know if maybe there's a better way thanks!

@PatD

This comment has been minimized.

Copy link

commented Nov 15, 2014

This was tremendously helpful. Thanks for posting!

@dcaponi

This comment has been minimized.

Copy link

commented Jul 1, 2016

Short, sweet, to the point. Thank you!

@rashmivsharan

This comment has been minimized.

Copy link

commented Dec 1, 2016

How to combine this three code??

@idbytes

This comment has been minimized.

Copy link

commented Jan 28, 2017

These all are already connected by controller name and json file name, only instead of todos.json inside get full path of the file should be given.

@guicuton

This comment has been minimized.

Copy link

commented Jul 2, 2018

I'm not quite sure if this is async request because if you put this on webserver and try to execute another action, the server will not respond your command until the $http request done and the then(res) get some results.

To work with a real async request with angular, its important read about promises and $q to handle async calls.
Here a link with a beautiful and simple digest about this - https://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.