Develop Reference

Data tables not responding to provided json result from api call to fill table with data

This is the JSON result being return from the API call.
{
"LoanOfficers": [{
"Id": 13,
"FirstName": "Smith",
"LastName": "Kerry",
"EmailAddress": "kerry.smith#test.com",
"LoanOfficerUrlParameterId": 312,
"UrlParameter": "/smithkerry123"
}, {
"Id": 713,
"FirstName": "Kerry",
"LastName": "Smith",
"EmailAddress": "kerry.smith#test.com",
"LoanOfficerUrlParameterId": 654,
"UrlParameter": "/kerrysmith1234578"
}]
}
I implemented the data table below. The call works and fetches the data and puts it into an object. From there the table reads no data in the table. I use a console.log() to see if the data was being passed back but it is but I don't know why it's not returning to the datable.
$(document).ready(function () {
$.ajax({
url: '/CallAPI',
type: 'GET',
dataType: 'json',
success: function (data) {
assignToEventsColumns(data);
}
});
function assignToEventsColumns(data) {
console.log(data);
var table = $('#table_id').dataTable({
"bAutoWidth": false,
"aaData": data,
"columns": [
{ "data": "Id" },
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "EmailAddress" },
{ "data": "LoanOfficerUrlParameterId" },
{ "data": "UrlParameter" }
],
"order": [[1, 'asc']]
})
}
});
Console log of the JSON object return from API call
I am new to data tables with JSON data don't understand fully understand why this issue is occurring. Any explanation would be much appreciated. All is I know that is returning a valid JSON format because I already tested that. I provided as much detail as possible. I provided an example of the JSON result and an example of console.log.
HTML
<table class="dataTable table table-striped text-center table-hover" id="table_id">
<thead>
<tr class="bg-green">
<th>Loan Officer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>LoanOfficerUrlParameterId</th>
<th>Url</th>
#*<th></th>*#
</tr>
</thead>
<tfoot>
<tr class="bg-green">
<th>Loan Officer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>LoanOfficerUrlParameterId</th>
<th>Url</th>
#*<th></th>*#
</tr>
</tfoot>
</table>

Binding array items in Vue.js

I have an arry which contains some array and proporties in it.
Now I want to iterate through the array and create new rows for each of items.
This is what I am doing.
var orderDetails = [{
"ID": "1",
"NAME": "Item1",
"Orders": [
"ORD001"
],
"Purchases": [
"RhynoMock",
"Ember"
],
"ISENABLED": "false"
},
{
"ID": "2",
"NAME": "Item2",
"Orders": [
"ORD002",
"ORD008"
],
"Purchases": [
"StufferShop"
],
"ISENABLED": "false"
}
];
var app = new Vue({
el: '#ordersDiv',
data: {
allOrders: orderDetails
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="ordersDiv">
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="order in allOrders">{{ order.NAME }}</tr>
</table>
</div>
Getting the error,
[Vue warn]: Error in render: "TypeError: Cannot read property 'NAME' of undefined"

Your HTML is invalid, and it seems that Vue's template compiler or DOM renderer has trouble with it: <tr> must only have <td> or <th> child elements, it cannot have text node children.
Try this instead:
<tr v-for="order in allOrders">
<td>{{ order.NAME }}</td>
</tr>

AngularJS: Read Json data from HTML table

Using angularjs here:
I am creating a table which has 2 static columns (ID & Comment) and rest columns are dynamically created by clicking a button. User can enter data in the rows of this table. I want to read/extract the data from the table that the user has entered.
I have created a jsfiddle at: http://jsfiddle.net/ajnh8bo5/7/
Click on add tab, give a name, and then click add columns
Reading json as:
$scope.read = function() {
return JSON.stringify($scope.targetTable);
};
Currently my generated json just gives information about the dynamic columns that was added. See json below:
{
"id":0,
"name":"Table 1",
"columns":[
{
"id":0,
"label":"Column 0",
"$$hashKey":"object:11"
}
],
"rows":[
{
"0":"2",
"$$hashKey":"object:9",
"undefined":"1",
"id":1037
}]
The above json is generated when I add just one dynamic columns. Here under rows array "0":"2" means that the first dynamic column has a value of "2". But it does not shows the data that was entered for ID & Comment column. I know I am missing something here but not sure how to proceed.
Another thing which is less important at this moment is also the json to spit out the column name as well.
---updated---
Adding desired output:
{
"columns": [
{
"id": 0,
"label": "ID"
},
{
"id": 1,
"label": "Column 1"
},
{
"id": 2,
"label": "Column 2"
},
{
"id": 4,
"label": "Comment"
}
],
"rows": [
{
"Id": "1",
"Column 1": "2",
"Column 2": "3",
"Comment": "user comment"
}
]
}
The above json shows I have 2 static columns Id & Comment. Column1 & Column2 are the dynamic ones.
If anyone cant provide me any solution based on the above JSON. Can anyone just let me know how can I just output static columns ID & Comment in my json.
--Updated with relevant code---
Below is the HTML table:
<table class="table table-bordered" ng-if="targetTable">
<thead>
<tr>
<th>ID #</th>
<th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
<th class="comment-fixed-width" ng-model="comment">Comment</th>
<td class="center add-column fixed-width"><a ng-href ng-click="addColumn()">+ Add Column</a></td>
<td class="comment-fixed-width" contenteditable="true" ></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td class="fixed-width" contenteditable="true" ng-model="r[column.id]"></td>
<td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
<td class="comment-fixed-width" contenteditable="true" ></td>
<td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
</tr>
</tbody>
</table>
AngularJs Code:
function createTable() {
tableCounter++;
return {
id: currentTableId++,
name: `Table ${currentTableId}`,
columns: [],
rows: [{}],
uniqueIdCounter: 1037
}
While creating a new tab I am creating an instance of table as:
$scope.tables.push(createTable());
$scope.tables = [];
$scope.targetTable = null;
//When I click add dynamic column button I use the below code.
$scope.addColumn = function() {
if (tableCounter) {
var columns = $scope.targetTable.columns,
id = columns.length;
$scope.targetTable.columns.push({
id: columns.length,
label: `Column ${id}`
});
}
};
//Below code is for adding a new row
$scope.addNewRow = function(value, row) {
if (tableCounter) {
if (!value || value === "" || typeof value !== 'string') return;
$scope.targetTable.rows.push({});
row.id = $scope.targetTable.uniqueIdCounter++;
}
};
Anyone with inputs?

I didn't want to overhaul your code, so I just made some small tweaks in your HTML code:
JSFiddle: http://jsfiddle.net/0oerpd5u/
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td class="fixed-width" contenteditable="true" ng-model="r.id"></td>
<td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!targetTable.rows[$index+1].id? addNewRow(r[column.id], r): ''"></td>
<td class="comment-fixed-width" contenteditable="true" ng-blur="!targetTable.rows[$index+1].id?addNewRow(r.comment, r):''" ng-model="r.comment">></td>
<td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
</tr>
</tbody>
and in your JS:
var uniqueIdCounter =1037;
function createTable() {
tableCounter++;
return {
id: currentTableId++,
name: `Table ${currentTableId}`,
columns: [],
rows: [{id: uniqueIdCounter}],
uniqueIdCounter: uniqueIdCounter
}
}
$scope.addNewRow = function(value, row) {
if (tableCounter) {
if (!value || value === "" || typeof value !== 'string') return;
$scope.targetTable.rows.push({id :++$scope.targetTable.uniqueIdCounter});
}
};

Dynamic ng-repeat in AngularJS

My angular controller is
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
My html
<table>
<tbody>
<tr ng-repeat="test in dyna">
<td>{{test.name}}</td>
<td>{{test.age}}</td>
</tr>
</tboody>
</table>
This works correctly, and outputs
Parshuram 24
Tejash 26
But if an another variable is added to my scope variable, I need to make changes in my html table:
$scope.dyna = [
{ "name": "parshuram", "age": 24 ,"void": true},
{ "name": "Tejash", "age": 26,"void" : false }
];
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td>{{test.name}}</td>
<td>{{test.age}}</td>
<!-- I don't want to have to add this, the columns should be added dynamically -->
<td>{{test.void}}</td>
</tr>
</tboody>
</table>
In that case, can the columns be generated dynamically, for example by getting all my object variables from the scope?

ng-repeat can loop over object key/values as well:
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="(key, value) in test">
{{value}}
</td>
</tr>
</tbody>
</table>
However as noted in the docs linked above, there are a few limitations compared to an ng-repeat that works on arrays:
The JavaScript specification does not define the order of keys
returned for an object, so Angular relies on the order returned by the
browser when running for key in myObj. Browsers generally follow the
strategy of providing keys in the order in which they were defined,
although there are exceptions when keys are deleted and reinstated.
See the MDN page on delete for more info.
ngRepeat will silently ignore object keys starting with $, because
it's a prefix used by Angular for public ($) and private ($$)
properties.
The built-in filters orderBy and filter do not work with objects, and
will throw an error if used with one.

You should be able to do that with (key,value) iteration.
Would be nice to have fiddle to verify but would be something like:
<tr ng-repeat= "test in dyna">
<td ng-repeat="(key,value) in test">{{value}}</td>
</tr>

If at 'runtime', I don't know. Otherwise:
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="key in objectKeys(test)">{{test[key]}}</td>
</tr>
</tbody>
</table>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
$scope.objectKeys = function (object) {
var keys = Object.keys(object);
keys.splice(keys.indexOf('$$hashKey', 1))
return keys;
}
}
fiddle

HTML
<html>
<script src="library/angular.min.js"></script>
<script src="practice.js"></script>
<head>
</head>
<body ng-app="app">
<div ng-controller="test1" ng-bind-html="result">
</div>
</body>
</html>
Angularjs
angular.module('app',[]).controller('test1',['$scope','$compile','$sce',function($scope,$compile,$sce){
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
$scope.result="<table><tbody>";
for(var i=0;i<$scope.dyna.length;i++){
$scope.result+="<tr>";
for(var key in $scope.dyna[i])
if($scope.dyna[i].hasOwnProperty(key))
$scope.result+='<td>'+$scope.dyna[i][key]+'</td>';
$scope.result+="</tr>";
}
$scope.result+="</tbody></table>";
$scope.result=$sce.trustAsHtml($scope.result);
}]);
This is another way, creating html in controller.

just make it again put another ng-repeat in your loop for the test variable:
$scope.dyna = [{ "name": "parshuram", "age": 24 ,"void": true}, { "name": "Tejash", "age": 26,"void" : false }];
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="t in test">{{test[t]}</td> // just like this
</tr>
</tboody>
</table>

Angularjs using Rowspan in Collections

I have collections of data coming from JSON request.. that i want to display with row span using angular.. but its not yet working properly.. hopefully you can help me with this.
$scope.data = [
{
order_number: "A-0001",
name: "computer 01-01",
status: 'new'
},
{
order_number: "A-0002",
name: "computer 02-01",
status: 'new'
},
{
order_number: "A-0001",
name: "computer 01-02",
status: 'new'
},
{
order_number: "A-0003",
name: "computer 03-01",
status: 'check'
},
{
order_number: "A-0001",
name: "computer 01-03",
status: 'new'
},
{
order_number: "A-0003",
name: "computer 03-02",
status: 'check'
}
];
I want my collections to display in a table like this.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">A-0001</td>
<td>01-01</td>
<td>new</td>
</tr>
<tr>
<td>01-02</td>
<td>new</td>
</tr>
<tr>
<td>01-03</td>
<td>new</td>
</tr>
<tr>
<td>A-0002</td>
<td>02-01</td>
<td>new</td>
</tr>
</tbody>
</table>
demo plunker

For a true angular solution, you shouldn't need javascript to alter the dom. Angular's goal is to have the data itself dictate how controls are rendered.
Are you able to change your data structure? I find it a bit odd that you have id's that aren't unique. I took the liberty of changing it so that each order has a set of sub_orders, which consist of the name and status.
Here's a working plunker with an altered data structure.
http://plnkr.co/edit/lpfAJPejfVGaJqB8f6HR?p=preview
Data structure:
$scope.data = [
{
order_number: "A-0001",
sub_orders: [
{
name: "computer 01-01",
status: "new"
},
{
name: "computer 01-02",
status: "new"
},
{
name: "computer 01-03",
status: "new"
}
]
},
{
order_number: "A-0002",
sub_orders: [
{
name: "computer 02-01",
status: "new"
}
]
},
{
order_number: "A-0003",
sub_orders: [
{
name: "computer 03-01",
status: "new"
},
{
name: "computer 03-02",
status: "new"
}
]
}
];
Here's the angular code for rendering the table:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody ng-repeat="order in data">
<tr>
<td rowspan="{{order.sub_orders.length + 1}}">{{order.order_number}}</td>
</tr>
<tr ng-repeat="suborder in order.sub_orders">
<td>{{suborder.name}}</td>
<td>{{suborder.status}}</td>
</tr>
</tbody>
</table>

Just made a quick and dirty solution to your problem using the data provided
http://plnkr.co/edit/fvVh73sXfIRLHw42Q2XM?p=preview
I ordered the data with ng-repeat and orderBy
ng-repeat="item in data | orderBy: 'order_number'"
And then using functions I checked if we needed a rowspan or not.
A Better solution for you would be to refactor the data,like MaskedTwilight's solution suggests, so that your order are already grouped per order number and that your items are a subcollection of this order. That whay you can reduce the code and watchers.