bubbles2189 bubbles2189 - 1 month ago 10
reST (reStructuredText) Question

AngularJS get data from webapi and store in table

I created a rest web api and using AngularJS, I want to receive those json data and store them in a table. I am new to AngularJS. I was able to get all the json data but I want to split them up into each row. I am not sure if I am doing to correctly or not but here is my code:

index.html

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="lib/angular.js"></script>
<script src="angularDemo.js"></script>
</head>
<body>
<div ng-controller="demoController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
</tr>
<tr ng-repeat=" quiz values">
<td>{{result.id}}</td> <!-- Does not get any value-->
<td>{{result.question}}</td> <!-- Does not get any value-->
</tr>
</table>
<h1>{{result}}</h1> <!-- gets all the json data -->
</div>
</body>
</html>


js

var app = angular.module("demoApp", []);

app.controller("demoController", function($scope, $http) {
$http.get("http://localhost:8080/quiz/webapi/quiz")
.then(function(response) {
$scope.result = response.data;
});
});

Answer Source

Your ng-repeat is not good,

If i understand your array of results is in $scope.result, so you have to do this kind of ng-repeat :

<tr ng-repeat="row in result">
   <td>{{row.id}}</td> 
   <td>{{row.question}}</td> 
</tr>