Develop Reference

Show JSON Data in Jquery Datatables

I've been trying to get my JSON data in jQuery DataTables component.
First I wrote the JavaScript code as well as a view as shown in the code below:
$(document).ready(function () {
$('#myData').DataTable({
lengthChange: false,
ajax: {
url: "http://amp-local/api/wipbin/FetchChild/",
// dataSrc: 'allk'
},
columns: [
{ data: "name" },
{ data: "numbers" }
],
select: true
});
});
My view:
<table id="myData" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Numbers</th>
</tr>
</thead>
</table>
My JSON:
[{
"numbers": "38",
"name": "Bllaca"
}, {
"numbers": "28",
"name": "Kaess"
}, {
"numbers": "27",
"name": "droessmer"
}, {
"numbers": "24",
"name": "friedricha"
}]
Result is with this error:
TypeError: undefined is not an object (evaluating 'f.length')
And my table is empty.

When using server-side processing with AJAX requests, it expects JSON data to be returned in the special format required by DataTables. The following fields of JSON response object are required: draw, data, recordsTotal and recordsFiltered. You need to bring your server response into accordance with expected format.
For example, your first response should be as following:
{
"draw": 1,
"recordsTotal": 4,
"recordsFiltered": 4,
"data": [
{
"numbers": "38",
"name": "Bllaca"
}, {
"numbers": "28",
"name": "Kaess"
}, {
"numbers": "27",
"name": "droessmer"
}, {
"numbers": "24",
"name": "friedricha"
}
]
}

Custom table layout ng-repeat

I'm trying to figure out how to dynamically show a table with a JSON element but in a format that is hard to do with tables. I'm using AngularJs 1.6.4 and Bootstrap but I'm kind of new at Angular. My JSON:-
"foo": {
"name": "foo",
"displayName": "FOO SHOW",
"environments": [
{
"id": "one",
"name": "PROD",
"url": "http://my-prod-url.com"
},
{
"id": "two",
"name": "QA",
"url": "http://my-qa-url.com"
},
{
"id": "three",
"name": "DEV",
"url": "http://my-dev-url.com"
}
]
},
"bar": {
"name": "bar",
"displayName": "BAR SHOW",
"environments": [
{
"id": "four",
"name": "PROD",
"url": "https://my-prod2-url.com"
},
{
"id": "five",
"name": "QA",
"url": "https://my-uat2-url.com"
},
{
"id": "six",
"name": "DEV",
"url": "https://my-dev2-url.com"
}
]
}
I want to display this in a way that dynamically shows everything but based on application on the top and environment on the left of a table. For example:-
ENV | FOO | BAR
PROD| fooProdUrl| barProdUrl
QA | fooQaUrl| barQaUrl
DEV | fooDevUrl| barDevUrl
I've tried this but it's not dynamic and it doesn't display in the order I want:-
<table class="table">
<thead>
<tr>
<th class="text-center">Environment</th>
<th class="text-center" data-ng-repeat="list in applications">{{list.displayName}}</th>
</tr>
</thead>
<tbody class="text-center">
<tr data-ng-repeat="list in applications">
<th class="text-center">
{{list.environments[0].name}} and {{list.name}}
</th>
<td>
{{list.environments[0].url}} and {{list.name}} and {{list.environments[0].name}}
</td>
<td>
{{list.environments[1].url}} and {{list.name}} and {{list.environments[1].name}}
</td>
</tr>
</tbody>
</table>
This displays it in rows but not in the column way I want it.
Should I reorganize my JSON object? Split it in a different way? I've been stuck for a little bit on this.
Thanks!

fill json data in html dynamically

I want to fill a table from a json file using AngularJS.
json file may vary from time to time (dynamic data).
Requirement is: Fill the table in html by parsing json file.
Table is in view.html file and AngularJS code should be in view.js.
JSON file: (there may be even more no of id's under services tree)
{
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
The output table should look like:
PS: the table alignment should be set as the name value may or may not has more info.
Thanks

Although, like #Johannes Jander saying, Stackoverflow is not a "write my code for me" service I will show you how to do this.
If you don't mind that the order of the columns will be different, you can easily iterate throw the object's properties and you wouldn't need to manipulate the json object. If the order is important, let me know and I will help you to figure it out.
To read more about what we have here please follow those links:
ng-repeat docs.
How can I iterate over the keys, value in ng-repeat in angular
Now, to the code:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.json = {
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
});
table {
border-collapse: collapse;
}
td {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
<table data-ng-if="json.result.services.length > 0">
<thead>
<tr>
<th data-ng-repeat="(key, value) in json.result.services[0]" data-ng-bind="key"></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="service in json.result.services">
<td data-ng-repeat="(key, value) in service" data-ng-bind="value"></td>
</tr>
</tbody>
</table>
</div>

Show table depending on json response

I have a json data with arrays of parameters like Sales, Tax etc. On click of a particular parameter from one page, the landing page should show the table for that particular parameter.
{
"Sales": [
{
"Date": "2015-08-01 23:35:15.652",
"Val": 78
},
{
"Date": "2015-08-01 22:35:15.652",
"Val": 82
},
{
"Date": "2015-08-01 21:35:15.652",
"Val": 80
},
{
"Date": "2015-08-01 21:15:15.652",
"Val": 100
},
{
"Date": "2015-07-27 12:57:15.652",
"Val": 94
}
],
"Tax": [
{
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
},
{
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
},
{
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
},
{
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
},
{
"createdOn": "2015-08-01 21:15:15.652",
"Min": 90,
"Max":200
}
]
}
My controller
angular.module('starter.controllers', [])
.controller('TableCtrl','$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(response){
if(response.data.Sales!=null){
$scope.data =response.data.Sales;
}
if(response.data.Tax!=null){
$scope.data =response.data.Tax;
}
});
});
How do I show table dynamically from the data? Since Sales table will contain 2 columns and Tax table will contain 3 columns.
Table for Sales
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.Date}}</td>
<td>{{item.Val}}</td>
</tr>
</tbody>
</table>
Table for Tax
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.Date}}</td>
<td>{{item.Min}}</td>
<td>{{item.Max}}</td>
</tr>
</tbody>
</table>
How to display different tables based on condition using same Controller, TableCtrl?

In your controller, separate data into $scope.sales and $scope.tax:
if(response.data.Sales != null){
$scope.sales = response.data.Sales;
$scope.tax = null;
}
if(response.data.Tax != null){
$scope.tax = response.data.Tax;
$scope.sales = null;
}
Then, in html use ng-if directive:
<div ng-controller="TableCtrl">
<table ng-if = "sales">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in sales">
<td>{{item.Date}}</td>
<td>{{item.Val}}</td>
</tr>
</tbody>
</table>
<table ng-if = "tax">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in tax">
<td>{{item.Date}}</td>
<td>{{item.Min}}</td>
<td>{{item.Max}}</td>
</tr>
</tbody>
</table>
</div>

If you have a set of fixed types such as Sales, Tax etc., the hard coded version like #Majid provided is fine. However, you could make a more dynamic version where the table adjusts to the json arrays provided.
Consider the following data:
var data={
"Sales": [
{
"Date": "2015-08-01 23:35:15.652",
"Val": 78
},
{
"Date": "2015-08-01 22:35:15.652",
"Val": 82
},
{
"Date": "2015-08-01 21:35:15.652",
"Val": 80
},
{
"Date": "2015-08-01 21:15:15.652",
"Val": 100
},
{
"Date": "2015-07-27 12:57:15.652",
"Val": 94
}
],
"Tax": [
{
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
},
{
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
},
{
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
},
{
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
},
],
"Inventory": [
{
"Type": "Car",
"Amount": 100,
},
{
"Type": "Bike",
"Amount": 32,
},
{
"Type": "Shoes",
"Amount": 677,
},
]
};
Controller:
function mainCtrl() {
this.data=data;
}
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
The below html code will now use the first object in each array to print out the property names, and then print each object from the array into to the table accordingly.
<body ng-controller="mainCtrl as main">
<div ng-repeat="(name, table) in main.data">
<h3>{{name}}</h3>
<table>
<thead>
<tr>
<!-- Iterate and print field names -->
<th ng-repeat="(key, value) in table[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<!-- Print rows -->
<tr ng-repeat="row in table">
<td ng-repeat="value in row">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</body>
Live example here: http://jsbin.com/pafanuwoka/edit?html,js,output
Having this solution you need to make sure that all objects in each array are alike as we are printing the field names from the first object in each array. But you are also able to add more json arrays into data field.
If this is a common occurrence in your application, you should probably consider adding this as a directive. Example here: http://jsbin.com/gayirinifo/edit?html,js,output

Create a table with colspan and a dynamic amount of columns

I'm new to angular and would like to create a table with an unknown amount of columns. Additionally the table contains a second row of header columns, also with a different and unknown amount of columns. I have to use colspan in the second line, but don't know how. What would be a good way, maybe to create a directive? Or is there a simpler solution?
For a better understanding I created: http://jsfiddle.net/uyLrjgyz/2/.
I get all the data in JSON format like:
{
"header": {
"columns": [
{
"name": "0ColHeader",
"subcolumns": [
{
"name": ""
}
]
},
{
"name": "1ColHeader",
"subcolumns": [
{
"name": "1Col1SubColHeader"
},
{
"name": "1Col2SubColHeader"
},
{
"name": "1Col3SubColHeader"
}
]
},
{
"name": "2ColHeader",
"subcolumns": [
{
"name": "2Col1SubColHeader"
}
]
},
{
"name": "3ColHeader",
"subcolumns": [
{
"name": "3Col1SubColHeader"
},
{
"name": "3Col2SubColHeader"
}
]
}
]
},
"rows": {
"data": [
[
{
"value": "text"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "1"
},
{
"value": "0"
},
{
"value": "1"
},
{
"value": "0"
}
],
[
{
"value": "more text"
},
{
"value": "1"
},
{
"value": "0"
},
{
"value": "1"
},
{
"value": "1"
},
{
"value": "0"
},
{
"value": "1"
}
]
]
}
}
I can modify the json, as long as I don't have to convert it to much at the backend.
This angularjs and template table is related to my problem, but it's a little bit skimped.

You're there almost. Here is the Working fiddle
For colspan its simple like this colspan="{{col.subcolumns.length}}"
But for next sub-headers we should write handler like below in controller after $scope.table
$scope.subHeaders = function () {
var subs = [];
$scope.table.header.columns.forEach(function (col) {
col.subcolumns.forEach(function (sub) {
subs.push(sub);
});
});
return subs;
};
Markup for second row:
<tr>
<th ng-repeat="col in subHeaders()">{{col.name}}</th>
</tr>
Full Table:
<div ng-app="tableApp" ng-controller="tableController">
<table>
<tr>
<th colspan="{{col.subcolumns.length}}" ng-repeat="col in table.header.columns">{{col.name}}</th>
</tr>
<tr>
<th ng-repeat="col in subHeaders()">{{col.name}}</th>
</tr>
<tr ng-repeat="row in table.rows.data">
<td ng-repeat="cell in row">{{cell.value}}</td>
</tr>
</table>
</div>