CODEWITHSUNDEEP
javascriptangularjs
mishtusorous
mishtusorous

Reputation: 363

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>

Upvotes: 0

Views: 127

Answers (1)

Divyesh Savaliya
Divyesh Savaliya

Reputation: 2730

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>

Upvotes: 2

Related Questions