Display json response from js controller into a html table

Question

I am working on a spring app with AngularJS. I have a response from a JS controller. I want to display in a table on the page.

devDebtTable is the object accessible to the page from the JS controller.

The response(mock data) from the JS controller I printed on the page, using {{devDebtTable}} is what I want to put into the table:

 {"headers":["John","Larry","Steve"],"rows":[["Project1","14 Days","2 Days","1 Day"],["Project2","10 Days","4 Days",""],["Project3","","2 Days","10 Days"]]}

I want it in the format like:

             Dev 1    Dev 2   Dev 3     Dev 4
Project 1   5 Days    2 Days  2 Days    1 Day
Project 2   5 Days    7 Days  2 Days
Project 3   3 Days   14 Days  12 Days   
Project 4   12 Days  14 Days  5 Days
Project 5   33 Days  53 Days  23 Days

This is what I have tried so far, which isn't right.

<div class="container">
    <table class="table table-bordered">
        <thead>
        <tr ng-repeat="data in devDebtTable">
            <th scope="colgroup"></th>
            <th scope="colgroup" ng-repeat="headers in data">{{headers}}</th>
        </tr>
        </thead>
        <tr ng-repeat="row in devDebtTable.row">
            <td>item:{{row}}</td>
            <!--<td ng-repeat="item in row">item:{{item}}</td>-->
        </tr>
    </table>
</div>

I burned through 8 hours yesterday trying different things. What can I do to get that JSON response into a table on the page?

Nikhil Aggarwal · Accepted Answer · 2017-05-23 14:16:17Z

1

There are series of errors in the code. Please update the code to following and try

remove ng-repeat="data in devDebtTable"
update headers ng-repeat to ng-repeat="headers in data.headers"
update data ng-repeat to ng-repeat="row in devDebtTable.rows"
remove <td>item:{{row}}</td>

uncomment <td ng-repeat="item in row">item:{{item}}</td> and remove text item:

<table class="table table-bordered">
   <thead>
      <tr>
         <th scope="colgroup"></th>
         <th scope="colgroup" ng-repeat="headers in data.headers">{{headers}}</th>
      </tr>
   </thead>
   <tr ng-repeat="row in devDebtTable.rows">
      <td ng-repeat="item in row">{{item}}</td>
   </tr>
</table>

answered May 23, 2017 at 14:16

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maher · Accepted Answer · 2017-05-23 14:32:15Z

In This Sample we create new model to our view

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

        app.controller("ctrl", function ($scope) {

            //this is your base model
            $scope.devDebtTable = {
                "headers": ["John", "Larry", "Steve"],
                "rows": [
                    ["Project1", "14 Days", "2 Days", "1 Day"],
                    ["Project2", "10 Days", "4 Days", ""],
                    ["Project3", "", "2 Days", "10 Days"]
                ]
            }

            //we have to create our model

            $scope.table = {
                headers: [],
                projects: []
            }

            angular.forEach($scope.devDebtTable.headers, function (item) {
                var header = { name: item }
                $scope.table.headers.push(header);
            });

            angular.forEach($scope.devDebtTable.rows, function (item, index) {
                var project = {
                    name: item[0],
                    days: []
                }

                for (var i = 0; i < item.length; i++) {
                    if (i > 0) {
                        var newValue = item[i] === "" ? null : item[i];
                        project.days.push(newValue);
                    }
                }

                $scope.table.projects.push(project);
            });

            

        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title>asd</title>

    <meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th ng-repeat="header in table.headers">
                    {{header.name}}
                </th>
            </tr>
        </thead>
        <tbody ng-repeat="project in table.projects">
            <tr>
                <td>{{project.name}}</td>
                <td ng-repeat="day in project.days">
                    {{day}}
                </td>
            </tr>
        </tbody>
    </table>
    </body>
</html>

Very nice and well thought out approach. I already have the controller written and sending the json response to the page. So the first solution works best for me. This works too though. Thanks.

Collectives™ on Stack Overflow

Display json response from js controller into a html table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related