I'm trying to get data from my json file for a small test project. I'm not getting any error in the developer tools and when I do console.log(data) after the request I get data from the file.
This is my angular code:
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope','$http', function($scope, $http){
$scope.todos = [];
$http.get('db/todos.json')
.then(function(data){
$scope.todos = data;
});
}]);
This is my html file:
<!doctype html>
<html ng-app="myApp">
<head>
<base href="/">
<title>My todo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<div class="container" ng-controller="MainController">
<div class="row">
<h1>Your todos</h1>
<li ng-repeat="todo in todos">
{{ todo.name }}
<li>
</div>
</div>
</body>
</html>
In my site the ng-repeat just prints out six bullet points which is wrong because I've got only two entries in my json file. Also this is what I get from my console.log(data):
Object {data: Object, status: 200, config: Object, statusText: "OK"}
config: Object
data:Object
headers:(name)
status:200
statusText:"OK"
__proto__:Object
Any ideas of what I've probably missed?
When using .then the actual response data is in response.data, so your code works if you change it like this:
.then(function(response){
$scope.todos = response.data;
});
Related
I have researched my issue and tried many solutions but have not solved it.
For some reason angular does not seem to be loading in plunker.
I have head iffy are no longer supported in later version in angular, but I have tried loading an older version and still does not work.
Any ideas on how I can get this running?
Here is the link:
http://plnkr.co/edit/rrnzNjze2QqkWtjvNUNH?p=preview
HTML
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.1.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular-bootstrap-prettify.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
<div>
{{ error }}
</div>
<div>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
<div>
<img ng-src="{{user.avatar_url}}" title="{{user.name}}" />
</div>
</div>
</body>
</html>
Javascript
// Code goes here
var app = angular.module("githubViewer", []);
var MainController = function($scope, $http) {
var onUserComplete = function(response){
$scope.user = response.data;
};
var onError = function(reason){
$scope.error = "Could not fetch the user request!";
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete, onError);
$scope.message = "Hello, Angular!";
};
app.controller("MainController", ["$scope", "$http", MainController]);
Replace angular-bootstrap-prettify.js (I don't know what is angular-bootstrap-prettify, do you really need it?) by angular.js and your plunkr works.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.iata + ', ' + x.continent }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("airports.json").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
</body>
</html>
My airports.json lies in the same directory as my html file.
I also passed the url where the JSON file resides. But seem to have no luck. Please Guide
JSON URL:
https://github.com/vedvasa/AngularPractice/blob/master/Assignment2/airports.json
Do I need to host i on localhost, or a server???
You need a server and "airports.json" is put on server, then you use $http.get to call to server, the server should return "airports.json" data.
New to AngularJs and stuck with $http getting data asynchronously, but not binding / showing the data.
The console.log is showing that the data is coming through alright. However, since the data is coming in asynchronously, the data is coming in after the page has already loaded.
<!DOCTYPE html>
<html>
<head>
<title>Iterate over data from Webservice.</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- This is the angularjs magic. -->
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
/* Lets get some data from an actual service. */
$http.get("http://www.w3schools.com/angular/customers.php").then(
function(response) {
console.log("This is what came back -"
+ response.data.records);
$scope.names = response.data.records;
});
});
</script>
</head>
<body>
<h1>Get data from a webservice and show it on the page.</h1>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repat="x in names">Name[{{x.Name}}]</li>
</ul>
</div>
</body>
</html>
change ng-repat to ng-repeat
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
/* Lets get some data from an actual service. */
$http.get("http://www.w3schools.com/angular/customers.php").then(
function(response) {
console.log("This is what came back -"
+ response.data.records);
$scope.names = response.data.records;
});
$scope.test = "tes1t";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<h1>Get data from a webservice and show it on the page.</h1>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="x in names">Name[{{x.Name}}]</li> <!-Here ng-repeat ->
</ul>
</div>
</body>
I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller
I'm using angular-file-upload.js and uploading an image. When the upload is successful, it returns a URL to where the image is hosted, which is hosted as a blob on Azure.
The upload is successful, and the URL is returned correctly, however when I push this URL on an "images" stack to view this image in the browser, it won't work properly. For example, the URL I get back looks like this:
"https://searlesmedia.blob.core.windows.net/event-images/4_slide-archive.jpg"
Controller.js
uploader.onSuccessItem = function (fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
$scope.uploadcomplete = "Upload Successful";
var url = $sce.trustAsResourceUrl(response);
$scope.images.push(url);
};
Html
<div class="row" data-ng-repeat="image in images">
<img ng-src="{{image}}" class="img-responsive" />
</div>
Hi it looks like you miss something please see here: http://plnkr.co/edit/1PpscI4dOMYpYRf6fbUS?p=preview
angular.module('mySceApp', ['ngSanitize'])
.controller('AppController', ['$http', '$scope', '$sce',
function($http, $scope, $sce) {
$scope.image = {};
$http.get("test_data.json").success(function(data) {
console.log(data.url);
// $scope.userComments = userComments;
$scope.image.url = $sce.trustAsResourceUrl(data.url);
});
}
]);
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example64-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController as myCtrl">
<div class="well">
<b>{{userComments.name}}</b>:
<img ng-src="{{image.url}}">
<br>
</div>
</div>
</body>
</html>