Can not seem to fetch the JSON data on my angular app - javascript

<!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.

Related

Show button in list - AngularJS

I'm new to AngularJS and have recently begun experimenting with creating tables and the ng-repeat functionality. I had an idea to write a JS object where every object has a respective name and a HTML button element associated with it. I'm able to create the list of objects without a problem, but the issue I'm running into is how to display the information; specifically, how to display each object's button element.
Below is the code I have for displaying each object in a list:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">
{{x.name + ', ' + x.button}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.names = [{name:'Mike',button:document.createElement('button')}]
});
</script>
</body>
</html>
Currently my results look like:
And what I would like to see is:
You should create the button with the html tag. Like this:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">
{{x.name}}
<button ng-click="...">{{x.button}}</button>
</li>
</ul>
</div>
Its the standard way to do it with AngularJS and will give you more freedom to use ng directives and all.
No idea what you want to create an element. Just use text for the property value and add appropriate markup in the template.
Use components or directives for any dom methods. They don't belong in controllers
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.names = [{name:'Mike',button:'Button name'}]
});
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">
{{x.name}}<button>{{x.button}}</button>
</li>
</ul>
</div>
<script>
</script>
</body>
</html>

angular js: Not able to pass value from controller to html of an included page

I have a header which remains common for all the pages. So, I included it in my index page like this.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
header.html
<ul>
<li>{{vm.myName}}"></li>
</ul>
My app.js file looks like this.
( function () {
angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);
})();
I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from headerController.js to it's view header.html
As you can see, there is only one variable in my header.html
On the other side, headerController.js communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:
{"myName":"Amelia Earheart"}
and here is my headerController.js
(function() {
angular
.module('myApp.header', [])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});
});
})();
Can anyone tell why I am not getting the value in html view?
You should link your view with your controller.
Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :
.controller('CommonController', function($scope, $routeParams, myCommonService) {
myCommonService.getName().success(function(data) {
$scope.myName = data.myName;
});
});
If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick.
If you don't do this, you'll have to update your header.html to :
<ul>
<li>{{myName}}</li>
</ul>

Why can't I retrieve data from my Json file?

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;
});

AngularsJS $http getting data, but not showing up.

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>

Angular URL 'trustAsResourceUrl' not working

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>

Categories