Fill HTML table from JSON object using angular.js

Question

I am trying to get data from json object and using ng-repeat show that data inside of a HTML table.

I am getting data with $http and later using ng-repeat for writing the rows of table.

This is my json object:

{
  "tests": [
    {
      "date": "08/02/1999",
      "name": "Test 1",
      "test": "Raven"
    },
    {
      "date": "11/09/1998",
      "name": "Test 2",
      "test": "PCT+"
    },
    {
      "date": "13/01/2005",
      "name": "Test 3",
      "test": "PCT"
    }
  ]
}

This is how I am trying to get json into angular variable:

var testApp = angular.module('testApp', []);
testApp.controller('TestListCtrl', function ($scope, $http) {
    $http.get('GlobalData.json').success(function (data) {
        $scope.tests = data;
    });
});

And this is my HTML for table:

<script src="batteriesScript.js"></script>
<script src="../scripts/angular.min.js"></script>
<table id="results" width="360" border="1">
    <thead>
        <tr>
            <th scope="col" width="120">Date Created</th>
            <th scope="col" width="120">Name</th>
            <th scope="col" width="120">Tests</th>
        </tr>
    </thead>
    <tbody ng:repeat="t in tests">
        <tr>
            <td>{{t.date}}</td>
            <td>{{t.name}}</td>
            <td>{{t.test}}</td>
        </tr>
    </tbody>
</table>

This is the index page where I have calls to different views depending on which link is clicked. Table content is in first view:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>BatteryApp</title>
    <meta charset="utf-8" />
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-route.min.js"></script>
    <link href="assets/style.css" rel="stylesheet" />
    <script src="scripts/routes.js"></script>
</head>
<body>
    <table style="font-family: Arial">
        <tr>
            <td colspan="2" class="header">
                <h1>
                    Battery Application
                </h1>
            </td>
        </tr>
        <tr>
            <td class="leftMenu">
                <a href="#/home">Home</a>
                <a href="#/addBattery">Add new battery</a>
            </td>
            <td class="mainContent">
                <ng-view></ng-view>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="footer">
                <b>Battery</b>
            </td>
        </tr>
    </table>
</body>
</html>

Data is not shown on the page and I do not get any exception in browser console.

Second problem I have is that I do not see all files and folders from my solution in Chrome console:

I am missing Batteries folder where is the code I am using for my table and accessing to data.

So practically I am unable to debug it and try to find some errors.

Does anybody have idea how can I solve Chrome problem and does anybody spots potential errors in code for generating HTML table using angular.js?

nikjohn · Accepted Answer · 2016-09-02 08:09:37Z

1

<table id="results" width="360" border="1">
    <thead>
        <tr>
            <th scope="col" width="120">Date Created</th>
            <th scope="col" width="120">Name</th>
            <th scope="col" width="120">Tests</th>
        </tr>
    </thead>
    <tbody >
        <tr ng-repeat="t in tests">
            <td>{{t.date}}</td>
            <td>{{t.name}}</td>
            <td>{{t.test}}</td>
        </tr>
    </tbody>
</table>

Change the location of the ng-repeat. The row should be repeating, not the table body, right?

As far as the missing folder is concerned, see if you have included the batter.js file in your index.html. Or share your index.html code

It looks like it should be Batteries/batteriesScript.js in the script tag

edited Sep 2, 2016 at 8:09

answered Sep 2, 2016 at 8:06

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

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

3 Comments

nemo_87 Over a year ago

Yes you were right, place for ng-repeat was wrong, but still no data in the table :( @DustinToothless

nikjohn Over a year ago

It looks like it should be Batteries/batteriesScript.js in the script tag

nemo_87 Over a year ago

That helped with seeing Batteries folder in console, now I can try to debug it and see if I even getting json data correctly :) @DustinToothless

Collectives™ on Stack Overflow

Fill HTML table from JSON object using angular.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related