I want to output two tables, each sourcing information from two separate arrays within the same JSON source, but for some reason my code doesn't work.
JSON Message:
{
"Policies": [
{
"name": "A",
"id": "1",
"score": "0"
}
],
"Services": [
{
"name": "B",
"id": "2",
"score": "0"
}
]
}
HTML Code:
<table id="policies-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Score</th>
</tr>
</thead>
</table>
<table id="services-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Score</th>
</tr>
</thead>
</table>
JavaScript Code:
var the_url = "www.example.com"
var columnsDef = [
{ data : "name" },
{ data : "id" },
{ data : "score" }
];
$(document).ready(function() {
$('#policies-table').DataTable({
ajax : {
url : the_url,
dataSrc: "Policies"
},
columns : columnsDef
}),
$('#services-table').DataTable({
ajax : {
url : the_url,
dataSrc: "Services"
},
columns : columnsDef
})
});
You are not iterating through your JSON variable. As prabodhprakash suggested, writing "Policies" and "Services" won't help either.
I suggest you to take a look at this fiddle
You can initialize multiple datatables with the same syntax that you use for initializing a single one:
var json = {
"Policies": [{
"name": "A",
"id": "1",
"score": "0"
}],
"Services": [{
"name": "B",
"id": "2",
"score": "0"
}]
}
var policyTable = $("#policies-table").DataTable({
"data" : (json.Policies),
"columns": [
{ "data": "name" },
{ "data": "id" },
{ "data": "score" }]
});
var serviceTable = $("#services-table").DataTable({
"data" :(json.Services),
"columns": [
{ "data": "name" },
{ "data": "id" },
{ "data": "score" }]
});
Related
This function
public function groups_priviledges($user_id = NULL){
$data['groups'] = $this->priviledges_model->admin_groups();
$data['member'] = $this->priviledges_model->empAdminGroup($user_id);
echo json_encode($data);
}
has returned this json array on my browser
{
"groups": [
{
"id": "1",
"description": "Human Resources",
"added": "2018-06-21 16:27:20",
"status": "1"
},
{
"id": "2",
"description": "Purchasing",
"added": "2018-06-21 16:31:47",
"status": "1"
},
{
"id": "4",
"description": "Warehouse",
"added": "2018-06-21 16:31:47",
"status": "1"
}
],
"member": [
{
"id": "41",
"admin_group_id": "4",
"employee_id": "16"
}
]
}
I am having a serious challenge using ajax to list all the groups, and a checkbox checked only if a member belongs to a particular group.
My html currently looks likr this
<table class="table table-striped">
<thead>
<tr>
<th> Priviledge </th>
<th> Options </th>
</tr>
</thead>
<tbody id="priviledges"></tbody>
</table>
And my ajax... I'm so lost here, doesn't return anything
<script>
$(function(){
priviledges();
function priviledges(){
$.ajax({
type: 'ajax',
url: '<?php echo base_url() ?>users/groups_priviledges/<?php echo $tuser['employeeId'] ?>',
async: false,
dataType: 'json',
success: function(data){
var html = '';
var groups;
for(groups=0; groups<data.length; i++){
html += '<tr>'+
'<td>'+data[groups].description+'</td>'+
'<td>'+'<label class="check"><input type="checkbox" name="group[]" class="icheckbox" checked=""/>'+
'</tr>';
}
$('#priviledges').html(html);
},error: function(){
alert('Could not retrieve data');
}
});
}
});
Thanks all in anticipation.
Your problem is that data is an object which contains an array (stored within the "groups" property of the object). However when you write data.length and data[groups] you're treating data itself as if it were the array, which it isn't.
The solution is to refer to the groups property of the data object and then refer to a specific array item within that:
var data = {
"groups": [{
"id": "1",
"description": "Human Resources",
"added": "2018-06-21 16:27:20",
"status": "1"
},
{
"id": "2",
"description": "Purchasing",
"added": "2018-06-21 16:31:47",
"status": "1"
},
{
"id": "4",
"description": "Warehouse",
"added": "2018-06-21 16:31:47",
"status": "1"
}
],
"member": {
"id": "41",
"admin_group_ids": ["1", "4"],
"employee_id": "16"
}
};
var html = '';
for (var count = 0; count < data.groups.length; count++) {
html += '<tr>' +
'<td>' + data.groups[count].description + '</td>' +
'<td>' + '<label class="check"><input type="checkbox" name="group[]" class="icheckbox"';
for (var ids = 0; ids < data.member.admin_group_ids.length; ids++) {
if (data.member.admin_group_ids[ids] == data.groups[count].id) {
html += "checked=checked";
break;
}
}
html += '/></tr>';
}
$('#privileges').html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th> Privilege </th>
<th> Options </th>
</tr>
</thead>
<tbody id="privileges"></tbody>
</table>
N.B. In the above I have also:
corrected the spelling of "privilege"
corrected the error in the definition of the for loop (i was not defined)
changed the loop variable name to "count", so it's not confused with the "groups" property in the data.
assumed that the JSON structure of "member" will now be changed to make sense when the member is in more than one admin group, and will be like this: "member": { "id": "41", "admin_group_ids": ["1", "4"], "employee_id": "16" } (see comments below)
I am trying to bind data to a jQuery Datatable but it only binds half of it. I checked the AJAX call; it returns success and I am getting data properly. However the same data is not binding to the grid.
My data:
{
"draw": "1",
"recordsFiltered": 1,
"recordsTotal": 1,
"data": [{
"TitleName": "w",
"CustomerName": "q",
"ServiceType": "r",
"MailClass": "w",
"ProcessingCategory": "a",
"Origin": "a",
"IsActive": true,
"DateModified": "1/31/2018 12:00:00 AM",
"ContentTitleId ": 1,
"MailClassId ": 1,
"ProcessingCategoryId ": 1,
"ServiceTypeId ": 1,
"TransportationTypeId ": 1
}]
}
$(document).ready(function () {
$('#example').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "/ContentTitleManagement/OverviewPageWithServerSidePagination",
type: "GET",
datatype: "json",
// success: function (result) {
// console.log("something");
// }
},
columns: [
{ "data": "TitleName" },
{ "data": "CustomerName" },
{ "data": "ServiceType" },
{ "data": "MailClass" },
{ "data": "ProcessingCategory" },
{ "data": "Origin" },
{ "data": "DateModified" },
{ "data": "IsActive" },
// Data gets bound up to here
// { "data": "ContentTitleId" },
// { "data": "MailClassId" },
// { "data": "ProcessingCategoryId" },
// { "data": "ServiceTypeId" },
// { "data": "TransportationTypeId" }
]
});
});
<table id="example">
<thead>
<tr>
<th>TITLE NAME</th>
<th>CUSTOMER NAME</th>
<th>SERVICE<br />TYPE</th>
<th>MAIL<br />CLASS</th>
<th>PROCESSING<br />CATEGORY</th>
<th>ORIGIN</th>
<th>DATE<br />MODIFIED</th>
<th>IS<br />ACTIVE</th>
<th>Content Title Id</th>
<th>Mail Class Id</th>
<th>Processing Category Id</th>
<th>Service Type Id</th>
<th>Transportation Type Id</th>
</tr>
</thead>
</table>
The above code works file as long as I keep those columns commented in columns section of the datatable method. But if I uncomment then it throws below error
DataTables warning: table id=example - Ajax error. For more information about this error, please see http://datatables.net/tn/7
You have spaces in your 5 last identifiers in data:
"IsActive": true,
"DateModified": "1/31/2018 12:00:00 AM",
"ContentTitleId ": 1, <-- space at the end
"MailClassId ": 1,
"ProcessingCategoryId ": 1,
"ServiceTypeId ": 1,
"TransportationTypeId ": 1
You have to change it to:
"IsActive": true,
"DateModified": "1/31/2018 12:00:00 AM",
"ContentTitleId": 1,
"MailClassId": 1,
"ProcessingCategoryId": 1,
"ServiceTypeId": 1,
"TransportationTypeId": 1
I am trying to add new column dynamically in the table. I have below object which is returned in response from web service api. How can I display dynamic columns where myArray object is getting appended with many other fields (new columns)
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
I have tried looking into the example provided in some of the answers in google. In my below JSFIDDLE, I am getting only the key name but not the values. How can I achieve both key and value using ng-repeat where the key names are dynamic.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<table ng-controller="myController" border="1">
<tr>
<th ng-repeat="(key, val) in myArray[0].contacts[0].contact">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArray[0].contacts">
<td ng-repeat="(key, val) in row.contact">{{ val }}</td>
</tr>
</table>
I am trying to convert data present in an HTML table into JSON link. I'm getting undefined values in object.
HTML code:
<table colspan="2" border="1">
<tr>
<th>Source</th>
<th>Destination</th
</tr>
<tr ng-repeat="col in MapCol">
<td>
<select ng-model="col.value" ng-init="col.value=MainData.headers[$index].header">
<option ng-selected="{{head.header == col.value}}" ng-repeat="head in MainData.headers">{{head.header}}
</option>
</select>
</td>
<td>{{col.ColName}}</td>
</tr>
</table>
<br/>
<button ng-click="map();">Map</button>
Controller code:
var app = angular.module("ShrTest", []);
app.controller("Test1", function ($scope) {
$scope.MainData = { "name": "1-06082015185338.txt", "headers": [{ "header": "Name" }, { "header": "Age" }, { "header": "Address" }], "records": [{ "Name": "Paul", "Age": "23", "Address": "1115 W Franklin" }, { "Name": "Bessy the Cow", "Age": "5", "Address": "Big Farm Way" }, { "Name": "Zeke", "Age": "45", "Address": "W Main St" }] };
$scope.MapCol = [{ "ColName": "Col1" }, { "ColName": "Col2" }, { "ColName": "Col3" }];
$scope.map=function(){
$scope.fields=[{"source":$scope.value,"destination":$scope.ColName}];
console.log(" $scope.fields..", $scope.fields);
}
});
JS
$scope.map=function(){
$scope.fields = [];
for(i in $scope.MapCol){
var obj = $scope.MapCol[i]; $scope.fields.push({"source":obj.value,"destination":obj.ColName})
}
console.log($scope.fields);
}
Here is Modified fiddle:
Demo Here
I hope this will help you.
I have a nested dict like following:
var dataSet = [{"s_group": [{"range_name": null,
"name": "XXXXXXXXXXXX"}],
"configfile": "XXXXXXXXXXX",
"src_port": ["0-65535"],
"d_group": [{"range_name": null,
"name": "YYYYYYYYYYY"}],
"action": "accept",
"protocol": "nun",
"dst_port": ["NN"]}]
I am able to create a table with above data using datatable for action, protocol, dst_port and src_port. But not for s_group and d_group
<script>
$(document).ready(function() {
$('#sg_rules').html( '<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-condensed" id="sg_table"></table>' );
$('#sg_table').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Action", "data": "action" },
{ "title": "Protocol", "data": "protocol" },
{ "title": "SRC_PORT", "data": "src_port" },
{ "title": "DST_PORT", "data": "dst_port" }
]
} );
} );
</script>
JSFiddle : http://jsfiddle.net/1s0jbm2z/
I am not able to display s_group and d_group to the table as they are another dict. I want to display them as a nested table.
I think this is what you want.
$(document).ready(function () {
$('#sg_rules').html('<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-condensed" id="sg_table"></table>');
$('#sg_table').dataTable({
"columnDefs": [
{
"render": function ( data, type, row ) {
return '<table><tr><td>'+data[0].range_name+'</td><td>'+data[0].name+'</td></tr></table>';
},
"targets": [0, 1]
}
],
"data": dataSet,
"columns": [{
"title": "s_group",
"data": "s_group"
}, {
"title": "d_group",
"data": "d_group"
}, {
"title": "Action",
"data": "action"
}, {
"title": "Protocol",
"data": "protocol"
}, {
"title": "SRC_PORT",
"data": "src_port"
}, {
"title": "DST_PORT",
"data": "dst_port"
}]
});
});