CODEWITHSUNDEEP
htmlangularjsjsonrest
bubbles2189
bubbles2189

Reputation: 159

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

Upvotes: 0

Views: 1002

Answers (1)

Drakkin
Drakkin

Reputation: 908

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>

Upvotes: 1

Related Questions