Fill HTML table from JSON object using angular.js - javascript

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">
Home
Add new battery
</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?

<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

Related

how to iterate table <tr> dynamically in html using node js

in node js i try to render table tr with iterate function but it shows unexpected token "<". check the given code snippet. in table row tr i want it iterate dynamically.
module.exports = ({p}) => {
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>
please help me how can i overcome to solve this issue
Use something like this :-
Map over array of p and produce array of tr for each p.
Then, append it to main html
module.exports = ({
ArrayOfP
}) => {
const allTr = ArrayOfP.map(p =>(`<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>`))
}
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
${allTr.join("")}
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>`
}

HTML/Javascript - Tables

Good day,
I want a straightforward way to loop through data and display it in a table.
If there's more data then it must create more rows etc.
Columns are fixed.. for now.
Example the code looks like the following
<table>
<thead>
<tr>
<th>Client Name</th>
<th>Client Representative</th>
<th>Client Representative Position</th>
<th>Client Representative Email</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
<tr>
<td id="client_name"></td>
<td id="client_representative"> </td>
<td id="client_representative_position"> </td>
<td id="client_representative_email"></td>
<td id="date_created"></td>
</tr>
</tbody>
</table>
<script>
var data = {
client_name: "Example Company",
client_representative: "John",
client_representative_position: "Engineer",
client_representative_email: "John#example.com",
date_created: "25/02/2021",
} **
document.getElementById("client_name").innerHTML = data.client_name;
document.getElementById("client_representative").innerHTML = data.client_representative;
document.getElementById("client_representative_position").innerHTML = data.client_representative_position;
document.getElementById("client_representative_email").innerHTML = data.client_representative_email;
document.getElementById("date_created").innerHTML = data.date_created; **
</script>
Basically, I want to avoid that piece surrounded by ** (javascript) bit by having it loop through the data.
Thanks in advance!
You Can use jQuery append()
Try this
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<table >
<thead >
<tr>
<th>Client Name</th>
<th>Client Representative</th>
<th>Client Representative Position</th>
<th>Client Representative Email</th>
<th>Date Created</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</body>
<script>
var data = [ {
client_name : "Example Company",
client_representative:"John",
client_representative_position:"Engineer",
client_representative_email:"John#example.com",
date_created:"25/02/2021",
},
{
client_name : "Example Company 2",
client_representative:"John 2",
client_representative_position:"Engineer 2",
client_representative_email:"John2#example.com",
date_created:"5/02/2021",
},
]
for (let index = 0; index < data.length; index++) {
var html = "<tr>";
html +="<td>"+data[index].client_name+"</td>";
html +="<td>"+data[index].client_representative+"</td>";
html +="<td>"+data[index].client_representative_position+"</td>";
html +="<td>"+data[index].client_representative_email+"</td>";
html +="<td>"+data[index].date_created+"</td>";
html += "</tr>";
$('#table-body').append(html);
}
</script>
</html>
To get the names of the keys in an object, you can use the in keyword.
This just loops through the keys as strings, allowing you to use in to set the elements in the table.
for (key in data)
document.getElementById(key).innerHTML = data[key]

I'm having issues getting AngularJS to display my table correctly

I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>

Download Table to excel With hidden rows with ng-repeat

I have a table created using ng-repeat. In this table i have the used ng-repeat-start and ng-repeat-end in order to hide some row which will be visible only when the user wants to see it. Now my problem is that when i try to export this table to Excel the rows which are visible only appear in the excel also as there are rows which are linked each other appear as different rows(as in the table also they are different rows). Now what i want is that all the rows whether visible or not should appear in the excel. An is there a way that two rows which are linked to each other(as they contain data related to one single instance) can appear as single row in excel. Here is my code
function myCtrl($scope) {
$scope.exportData = function () {
var table = document.getElementById('exportable');
var html = table.outerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
};
$scope.items = [{
"Name": "Name1",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia", "apple"]
}, {
"Name": "Name2",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia", "iPhone"]
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<div ng-controller="myCtrl">
<button ng-click="exportData()" >Export</button>
<br />
<table width="100%" id='exportable'>
<thead>
<tr >
<th></th>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items">
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
<td>
<button ng-click="item.expanded=true">
more
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="item.expanded">
<td colspan=''>
</td>
<td colspan=''>
Hello
</td>
<td >
<button ng-click="item.expanded=false">
Hide
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Here is the Fiddle
Any Help would be appreciated Thanks.
use ng-show insted of ng-if fiddle
<tr ng-repeat-end ng-show="item.expanded">

Create table using Mushtache.js

I am facing a problem while creating a table using Mushtache.js
View file:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Email ID</th>
<th class="header">Contact Number</th>
<th class="header">Edit</th>
</tr>
</thead>
<tbody>
<div id="eTableList"></div>
<script id="eList" type="text/template">
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
</script>
</tbody>
</table>
JS code:
function createTable(jsonEData){
var template = $("#eList").html();
expList = Mustache.render(template, jsonEData);
$("#expertTableList").html(expList);
}
I am calling this method as
<script language="javascript">
$(document).ready(function(){
createTable(<?php echo $this->eList;?>);
})
</script>
and the value of $this->eList = jsonEData is
[
{
"id": "52d3d523bdde226f17a581ba",
"name": "shgajsah",
"email": "0",
"contact_number": 2147483647
},
{
"id": "52d3d5c8bdde22c817a581ba",
"name": "fffsdf",
"email": "asa#ddjdj.com",
"contact_number": 323323232
}
]
I am not getting any error but table is not getting populated using above code. So please tell me where I am doing wrong?
You're not iterating over your items, give this a shot:
{{#.}}
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
{{/.}}
or perhaps:
{{#each .}}
<tr> ... </tr>
{{/each .}}

Categories