I'm working in a project to help a friend, so most of the code in the services and the backend was already there, so I've been struggling with the structure and sometimes I get lost.
Here's my problem
This is the structure of the data on the API:
{
"title": "",
"iconURL": ",
"linkedRightsIDs": [
""
],
"linkedRights": [
{
"id": ,
"creationDate": "",
"sections": [
"women"
],
"defLanguage": "en",
"countryApplied": "united states",
"statesApplied": [
"all"
],
"title": "",
"translations": [
"en"
],
"disable": false,
"content": null
}
]
}
What I'm trying to achieve, is to make a table inside my component using the LinkedRights data. Right now, this structure only have 1 linkedRight (I deleted the data inside for privacy)
Anyways, here's the method regarding the service and model in my component.ts:
onModelLoadedAsync() {
super.onModelLoadedAsync();
if (this.mode == 'create') {
this.model = LocalityInfo;
} else {
if (this.model.iconURL){
this.imageSrc = this.model.iconURL;
}
}
if(this.mode == 'edit'){
const data= Object.entries(this.model.linkedRights); //this is me just testing
console.log(data);
}
}
here's the html of the table I'm trying to display, this is and edit route so there's a query param for the id in this view
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Sections</th>
<th>States</th>
<th>Enabled</th>
<th>Creation Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data">
<td>{{item.title}}</td>
<td>{{item.sections}}</td>
<td>{{item.statesApplied}}</td>
<td>{{!item.disabled}}</td>
<td>{{item.creationDate}}</td>
</tr>
</tbody>
</table>
</div>
</div>
What I was trying to do, was to convert the JSON into an array so I could display it since there's an error that shows on the console that said this:
core.js:6456 ERROR Error: Cannot find a differ supporting object '[object Object]' of type'object'. NgFor only supports binding to Iterables such as Arrays.
I'm using AJAX to get data into my Datatables table. This is something I've done before and it worked fine, but this time I'm running into an issue.
When I run InitializeDatatables JS function, it successfully generates the table and runs the AJAX which reaches the GetDataForTable controller action. However, nothing more happens once the controller action returns. What should happen is the function in "render" section should run but it does not. No error is given either.
As far as I can tell, this setup is very similar to one I had in another project, but I can't find where I'm making a mistake. One difference is that the previous project was on ASP.NET Core 3.0 and this one is on 2.2.
HTML table setup:
<table id="myTable">
<thead>
<tr>
<th>
Important Stuff
</th>
</tr>
</thead>
//Datatables automatically generates the rest of HTML needed
</table>
JS function that runs on page load:
function InitializeDatatables() {
$('#myTable').DataTable({
"lengthChange": false,
"ajax": {
"url": "/Home/GetDataForTable", //controller action runs and returns
"type": "GET",
error: function (error) {
var test = error; //no error is given
}
},
"columns": [
{ "data": null } //"data: null" to access all JSON data in "render" function(data).
],
"columnDefs": [
{
"targets": 0,
"render": function (data) { //function never runs
var test = data;
return '<span>test</span>';
}
},
{"className": "testClass", "targets": 0} //class name is successfully added
]
});
}
Controller action:
[HttpGet]
public JsonResult GetDataForTable()
{
MyModel model = new MyModel();
model.ImportantStuff = _myProcessingService.GetDataFromDB();
return Json(new { data = model });
}
My question is about how can I edit, delete and add data in Datatables
jsfiddle CODE
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Test</th>
<th>Description</th>
<th>Result</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
$(document).ready(function (){
var table = $('#example').DataTable({
"ajax": "https://api.myjson.com/bins/575cy",
"columns": [
{ "data": "tId" },
{ "data": "description"},
{ "data": "rst" },
{ "data": "startDate" },
{ "data": "endDate"}
]
});
});
1: In above link there is code by someone I want to know if it's possible to add, update and delete data.
2: I also want to know how update, delete and edit will change data on json page as well so after refresh or on reopening the page I see updated not the previous data.
EIDTED:: I also have a MySQL database using with servlet and JSP , java if anyone can help me find a solution on using datatables with that as well and edit and delete as well...
Hope I have cleared myself properly.
I am working on datatables. I have posted 2 questions already related to my this question this and this.
AJAX CALL:
API.call("getBasicCallAnalysisData.json", 'POST', function(data) {
basicData = data;
createTable(basicData);
}, function(error) {
console.log(error);
}, jsonStr);
this my json response from server:
{"msg":null,"code":null,"status":null,"result":[{"aNumber":"3224193861","bNumber":"3217284244","cellID":"410-01-604-30226","dateTime":"2017-06-24 23:08:09.0","duration":801,"imei":"27512671195807","imsi":"35788979525680","operatorId":1,"mscId":"2","fileId":"1"},{"aNumber":"3224193861","bNumber":"3217280585","cellID":"410-01-738-13433","dateTime":"2017-06-24 06:53:13.0","duration":198,"imei":"46341570864238","imsi":"33270572168878","operatorId":2,"mscId":"4","fileId":"2"}],"draw":1,"limit":1000,"recordsFiltered":13442,"recordsTotal":13442}
HTML TABLE :
<table id="table" class="display responsive nowrap" cellspacing="0" width="100%">
<thead style="background-color:#303641;">
<tr>
<th>ANUMBER</th>
<th>BNUMBER</th>
<th>DATETIME</th>
<th>DURATION</th>
<th>IMEI</th>
<th>IMSI</th>
<th>CELLID</th>
<th>OPRID</th>
<th>MSC ID</th>
<th>FILE ID</th>
</tr>
</thead>
</table>
and this is my function to load datatable BUT I am facing two errors:
function createTable(data) {
console.log(data);
$('#table').DataTable({
"processing": true,
"serverSide": true,
"bFilter": false,
"iDisplayLength": configData,
dom: 'Bfrtip',
buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
searching: false,
language: {
buttons: {
colvis: 'Show/Hide Columns'
}
},
"aaData": data
});
}
The parameter data is response from server. Errors are :
DataTables warning: table id=table - Requested unknown parameter
'aNumber' for row 0, column 0. For more information about this error,
please see http://datatables.net/tn/4
and
Invalid JSON Response.
any idea, how Can i populate datatable with JSON response ?
There is two possibility to get your json into DataTables...
Use a jQuery Ajax request
Use the DataTables remote preocessing
You use the first one.
There is two main problems to your code:
A superflous DataTables attribute.
A valid JSON, but not structured as DataTables expects it.
#1
The attribute "serverSide": true, basically says that you intend to use the "remote processing". So DataTables expects now an "ajax" attribute holding the PHP address to get the JSON. This missing attribute triggered the "invalid JSON" error.
I hear you shouting loud about unclear error messages now!!! (lol)
#2
DataTables expects the data structured as an array for the whole table...
This array has to hold arrays of "row" values. Example here.
That is not what you actually have.
So I made a function to "re-arrange" the data to satisfy DataTables expectations.
console.clear();
// A function to run trhough your json and restructure the data as an array of array.
function arrangeData(data){
var datatableData = [];
for(i=0;i<data.length;i++){
var row = [
data[i].aNumber,
data[i].bNumber,
data[i].cellID,
data[i].dateTime,
data[i].duration,
data[i].imei,
data[i].imsi,
data[i].operatorId,
data[i].mscId,
data[i].fileId
];
datatableData.push(row);
}
console.log(datatableData);
return datatableData;
}
// Your original function not really changed...
function createTable(data) {
$('#table').DataTable({
"processing": true,
//"serverSide": true, // This works with the "remote preocessing" ajax attribute.
"bFilter": false,
//"iDisplayLength": configData, // I commented this one only because I did not have the "configData" variable.
dom: 'Bfrtip',
buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
searching: false,
language: {
buttons: {
colvis: 'Show/Hide Columns'
}
},
"aaData": arrangeData(data) // I'm calling the "arrange" function here.
});
}
// This is to simulate the response you get form jQuery Ajax.
var dataset = {
msg:null,
code:null,
status:null,
result:[
{
"aNumber":"3224193861",
"bNumber":"3217284244",
"cellID":"410-01-604-30226",
"dateTime":"2017-06-24 23:08:09.0",
"duration":801,
"imei":"27512671195807",
"imsi":"35788979525680",
"operatorId":1,
"mscId":"2",
"fileId":"1"
},
{
"aNumber":"3224193861",
"bNumber":"3217280585",
"cellID":"410-01-738-13433",
"dateTime":"2017-06-24 06:53:13.0",
"duration":198,
"imei":"46341570864238",
"imsi":"33270572168878",
"operatorId":2,
"mscId":"4",
"fileId":"2"
}
],
"draw":1,
"limit":1000,
"recordsFiltered":13442,
"recordsTotal":13442
};
// Call the table draw function... Certainly in your ajax success callback.
createTable(dataset.result);
CodePen
I have some data that I want to output using jsViews. The case is that objects in data array can have different set of attributes/columns based on some conditions. I store those attributes names in settings and would like to be able to print contents of data with all additional columns stored in a settings array. For example:
data = {
view_settings: [{
property_name: "prop1"
},
{
property_name: "prop2"
}
],
object_list: [{
id: "180",
name: "test1",
prop1: "test-prop-1",
prop2: "test-prop-2"
}
]
}
What I would like to achieve is to display contents of object_list using property listing from view_settings. Is this even possible using jsViews?
The best way to find an answer for you question is to ask it first, understand it (rubber duck method) and then find an answer.
In order to do this we need to alias objects twice. Here is my simplified jsViews template code which will display correctly data from example from my question:
<script id="template1" type="text/x-jsrender">
<table>
<thead>
<tr>
<th>Name</th>
{{for view_settings}}
<th>{{>property_name}}</th>
{{/for}}
<th></th>
</tr>
</thead>
<tbody>
{{for object_list ~view_settings=#data.view_settings}}
<tr>
<th>{{>name}}</th>
{{for ~view_settings ~object=#data}}
<th>{{:~object[property_name]}}</th>
{{/for}}
<th></th>
</tr>
{{/for}}
</tbody>
</table>
</script>
Hope this spares someones time ;)