I need to code an AngularJS page which displays some JSON data coming from a REST Service.
The REST service when invoked displays this JSON example data:
[{"key":"ABX1234","value":"Network Hub"}]
Here is the HTML page that I'm using to retrieve the data:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Hello($scope, $http) {
$http.get('http://host/json').
success(function(data) {
$scope.json = data;
});
}
</script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{json.key}}</p>
<p>The content is {{json.value}}</p>
</div>
</body>
</html>
Unfortunately nothing is displayed as json.key or json.value. Can you help me to find out what is the issue ?
Thanks!
It should be like this:
<div ng-controller="Hello">
<div ng-repeat="json in json">
<p>The ID is {{json.key}}</p>
<p>The content is {{json.value}}</p>
</div>
</div>
You are getting array of objects. It needs to be iterated.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With