Develop Reference

API in javascript is returning data, but is not being saved into an array

I am trying to fetch data from an API of WordPress. Here is my code:
column.data().unique().sort().each(function (d,j) {
var practiceArea = d.practice_area;
var jsonPacticeArea = JSON.stringify(practiceArea);
if (jsonPacticeArea !== undefined) {
var res = $.map(jsonPacticeArea.split("|"), $.trim);
for (var i = 0; i < res.length; i++) {
var str = res[i];
str = str.replace(/"/gi, '').trim();
if (arrayPracticeArea.indexOf(str) === -1) {
arrayPracticeArea.push(str);
}
}
}
});
the "column" is the variable that is getting data through an API, and as far as I do console.log(column. data().unique().sort()), that's returning complete data as you can see in the screenshot:
[![enter image description here][1]][1]
and I want to fetch data is marked in red rectangle and store those values in an array, but as soon as I try to add "each" function to fetch the data and store it in an array (in my case its arrayPracticeArea) its returning undefined values.
Can anyone please help me out? I am just not much experienced with Javascript API.
Here is my AJAX code:
var tableAttorney = $('#table_affliate_attorney').DataTable({
destroy: true,
searching: true,
bLengthChange: false,
scrollX: true,
scrollY: 440,
autoWidth: false,
"language": {
"emptyTable": "We are sorry but there are no Affiliate Attorneys within a 150 mile radius of your requested search"
},
ajax: {
type: 'get',
url: "/wp-admin/admin-ajax.php",
dataType: 'json',
cache: false,
data: {
'action': 'get_attorney_ajax',
'center_lat': center_lat,
'center_long': center_long,
'state': state,
'city': city,
'zip': zip
}
},
columns: [
{"data": "title"},
{"data": "city"},
{"data": "state"},
{"data": "zip"},
{"data": "distance"},
{
"data": "phone",
className: 'datatablePhone',
render: function (data) {
return '' + data + '';
}
},
{
"data": "email",
className: 'px190EM',
render: function (data) {
return '' + data + '';
}
},
{
className: 'js-practice-area',
"data": "practice_area"
},
{
"targets": -1,
"data": 'email',
render: function (data) {
return "<a class='contact-lawyer' href='#' data-toggle='modal' data-target='#exampleModal' data-whatever='#mdo' data-email='"+data+"'>Contact</a>";
}
},
],
columnDefs: [
{"width": "150px", "targets": [0]},
{"width": "130px", "targets": [5]}
],
So I am trying to fetch data from columns->data that has value practice_area.
Here is the fiddle link where I have hosted my whole JS code: https://jsfiddle.net/fareeboy/apor08jn/1/
[1]: https://i.stack.imgur.com/4EOZS.png

Datatable columndefs not being hit

I have been trying to render my json in datatable. The json format i have been working with is as follows:
{
message: "",
data: {
count: "",
result: [
{
parameter1: "",
parameter2: "",
parameter3: "",
},
{
parameter1: "",
parameter2: "",
parameter3: "",
},
]
}
}
Datatable Code is as follow
$('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "https://c22c6e75-a9b9-4762-8f5d-b25137536fa6.mock.pstmn.io/iprSearchData",
},
"columnDefs": [
{
"targets": [0],
"data": function (row, type, val, meta) {
// not hitting
console.log(row);
console.log(type);
console.log(val);
console.log(meta);
},
"render": function (data, type, row) {
console.log(data);
console.log(row);
return data;
},
},
// {targets: [0], visible: true},
// {targets: '_all', visible: false}
]
});
I read the documentation and I assume the data(JSON) format is creating problems for me in rendering or is it some other issue?
I want to render my parameters in reult array of the JSON to be displayed in a single column.
Thanks in advance.

The JSON format was the issue. Use datasrc in ajax for appropriate data from the returned ajax.

Datatables.net no load JSON - SignalR

I want to load the following JSON object into Datatables.net but it does not work. I tried to find a solution like this: Datatables.net json data load, but without success.
I use SignalR to pass the JSON from the server-side to the client, and it runs because I can receive the JSON but I can't load it into a Datatable.
Please, could someone help me?
Thanks in advance!
C# code:
cmm_dbEntities db = new cmm_dbEntities();
var result = from a in db.TAB_PN
join b in db.TAB_APPL on a.idapplicability equals b.idapplicability
join c in db.TAB_ISSUE on a.idissue equals c.idissue
select new
{
a.pn,
a.title,
b.appl_desc,
c.issue,
c.issue_date,
c.rev,
c.rev_date,
a.equipment,
a.formattype
};
var obj = new { data = result };
string json = JsonConvert.SerializeObject(obj);
return json;
Here is my JSON:
{
"data": [{
"pn": "346B0300A3300.801",
"title": "Test Bench Replenish Unit, Engine Oil - Operation and Maintenance Manual with Illustrated Parts Breakdown",
"appl_desc": "DESCRIZIONE 005",
"issue": "ISSUE-003",
"issue_date": "2015-03-01T00:00:00",
"rev": "0003",
"rev_date": "AAAAAAAAB9M=",
"equipment": "Test Bench, Replenish Unit, Engine Oil",
"formattype": "XML"
}, {
"pn": "346B0300A3300.805",
"title": "Test Bench Replenish Unit, Engine Oil - Operation and Maintenance Manual with Illustrated Parts Breakdown",
"appl_desc": "DESCRIZIONE 015",
"issue": "ISSUE-004",
"issue_date": "2015-04-01T00:00:00",
"rev": "004",
"rev_date": "AAAAAAAAB9Q=",
"equipment": "Test Bench, Replenish Unit, Engine Oil",
"formattype": "XML"
}, {
"pn": "415808",
"title": "Operating and Maintenance Manual for Ni-Cd Aircraft batteries",
"appl_desc": "DESCRIZIONE 015",
"issue": "ISSUE-001",
"issue_date": "2015-01-01T00:00:00",
"rev": "0001",
"rev_date": "AAAAAAAAB9E=",
"equipment": "Battery",
"formattype": "XML"
}, {
"pn": "415818",
"title": "Operating and Maintenance Manual for Ni-Cd Aircraft batteries",
"appl_desc": "DESCRIZIONE 009",
"issue": "ISSUE-002",
"issue_date": "2015-02-01T00:00:00",
"rev": "0002",
"rev_date": "AAAAAAAAB9I=",
"equipment": "Battery",
"formattype": "XML"
}]
}
Here is my js:
hub.client.inizializzaFiltri = function (data) {
console.log(data);
$('#PNTable').DataTable({
dataSrc: "objects",
columns: [
{ data: null, defaultContent: '' },
{ data: 'pn' },
{ data: 'title' },
{ data: 'appl_desc' },
{ data: 'issue' },
{ data: 'issue_date' },
{ data: 'rev' },
{ data: 'rev_date' },
{ data: 'equipment' },
{ data: 'formattype' }],
order: [[1, "asc"]],
columnDefs: [
{
orderable: false,
className: 'select-checkbox',
targets: 0
},
],
retrieve: true,
select: {
style: 'os',
selector: 'td:first-child'
}
});
}
My HTML code:
<table id="PNTable" class="display">
<thead>
<tr>
<th></th>
<th>pn</th>
<th>title</th>
<th>appl_desc</th>
<th>issue</th>
<th>issue_date</th>
<th>rev</th>
<th>rev_date</th>
<th>equipment</th>
<th>formattype</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>pn</th>
<th>title</th>
<th>appl_desc</th>
<th>issue</th>
<th>issue_date</th>
<th>rev</th>
<th>rev_date</th>
<th>equipment</th>
<th>formattype</th>
</tr>
</tfoot>
</table>

I did not see you setting the property data. Please assign data: data when you initialize the table.
hub.client.inizializzaFiltri = function (data) {
console.log(data);
$('#PNTable').DataTable({
data: data //you are missing this
dataSrc: "objects",
columns: [
{ data: null, defaultContent: '' },
{ data: 'pn' },
{ data: 'title' },
{ data: 'appl_desc' },
{ data: 'issue' },
{ data: 'issue_date' },
{ data: 'rev' },
{ data: 'rev_date' },
{ data: 'equipment' },
{ data: 'formattype' }],
order: [[1, "asc"]],
columnDefs: [
{
orderable: false,
className: 'select-checkbox',
targets: 0
},
],
retrieve: true,
select: {
style: 'os',
selector: 'td:first-child'
}
});
}

Thanks again #naveen #ehsanmhdi and #rahsharm77 for your suggestions.
I solved in this way...
C# code:
...
var obj = new { data = result };
string json = JsonConvert.SerializeObject(obj);
return json;
JS code:
hub.client.inizializzaFiltri = function (data) {
var jsn = JSON.parse(data);
$('#PNTable').DataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": true,
"bAutoWidth": true,
"dataSrc": "",
"data": jsn.data,
"dataSrc": jsn.data,
responsive: true,
columns: [
{ "data": null, defaultContent: '' },
{ "data": 'pn' },
{ "data": 'title' },
...
I have to Deserialize che JSON using JSON.parse(data) before to put it in the DataTable.
Thanks again

DataTable - Getting error when putting select checkbox in first column

I know it has been addressed already, but I'm just not getting it to work. I'm using DataTable Editor with resposnive and serverside. I'm getting an error when I put the checkbox in the first column like:
js:
var table = $('#mytable').DataTable( {
dom: "rt",
ajax: {
url: "/source.php",
type: "POST",
data: function (d) {
}
},
serverSide: true,
processing: true,
select: {
style: 'os',
selector: 'td:first-child'
},
columns: [
{
data: null,
defaultContent: "",
className: "select-checkbox",
orderable: false,
targets: 0
},
{ data: "logo" },
{ data: "name" },
{ data: "product" }
]
} );
That's the Error message:
DataTables warning: table id=mytable - Unknown field: (index 0)
php:
Editor::inst( $db, 'table' )
->fields(
Field::inst( 'logo' ),
Field::inst( 'url' ),
Field::inst( 'name' ),
Field::inst( 'product' )
)
... wenn putting in the last column it works:
...
columns: [
{ data: "logo" },
{ data: "name" },
{ data: "product" },
{
data: null,
defaultContent: "",
className: "select-checkbox",
orderable: false,
targets: 0
}
]
...
How can I get the checkbox in the first column? (So column 0)

add this in code
$("#table").DataTable({
'columnDefs': [{
'targets': 0,
'bSortable': false,
'render': function (data, type, full, meta){
return '<input type="checkbox"> <label>Checkbox</label>';
}
}]
})

Here the answer from the author:
You have server-side processing enabled, and the default ordering is to order on the first column. When that happens, DataTables is telling the server to order on the client-side generated column and throws an error.
Use ``order: [[1, 'desc']]` to resolve that.

add record function in Kendo UI grid is called many times

I am using this html code for Keno UI grid
function loadPhoneGrid(salesRepsId){
$("#phone-grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "operations/get_phones_sales_reps.php?salesRepsId="+salesRepsId,
type: "GET"
},
update: {
url: "operations/edit_phone_number.php?salesRepsId="+salesRepsId,
type: "POST"
},
destroy: {
url: "operations/delete_phone.php",
type: "POST"
},
create: {
url: "operations/add_phone.php?salesRepsId="+salesRepsId,
type: "POST",
},
},
schema: {
data:"data",
total: "data.length", //total amount of records
model: {
id: "PhoneId",
fields: {
PhoneType: { defaultValue: { PhoneTypeId: 1, PhoneTypeName: "Work"} },
PhoneNumber: { type: "string" },
IsMainPhone: {type: "boolean", editalbe:true},
}
}
},
pageSize: 5,
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
reorderable: false,
groupable: false,
batch: true,
toolbar: ["create", "save", "cancel"],
editable: true,
columns: [
{
field:"PhoneType",
title:"Type",
editor: PhoneTypeDropDownEditor,
template: "#=PhoneType.PhoneTypeName#"
},
{
field: "PhoneNumber",
title:"Phone Number",
},
{
field: "IsMainPhone",
title:"Is Main",
width: 65,
template: function (e){
if(e.IsMainPhone== true){
return '<img align="center" src ="images/check-icon.png" />';
}else{
return '';
}
}
// hidden: true
},
{ command: "destroy", title: " ", width: 90 },
],
});
}
The code in the server side is (add_phone.php)
<?php
require_once("../lib/Phone.php");
$phone = array();
foreach($_POST as $name => $value){
$phone[$name] = $value;
}
Phone::AddPhoneNumber($_GET["salesRepsId"], $phone);
?>
For the first time, I added a new record. add_phone.php is calling once and everything is working fine. For the second time (with out refresh the page) when I try to add a new record, add_phone.php is called twice. One of them contains the first record which has been added to database before and the second is the new the data.
in the result I have 3 records ( 2 same data of first insert) and one new.
This an example to make it clear ( inspect the post request with firebug)
first click on save button (false, (111) 111-1111, 4,Fax) // after I enter this phone (111) 111-1111
second click on save button (false, (111) 111-1111, 4,Fax) in addition to (false, (222) 222-2222, 3,Work) // after I added this (222) 222-2222
Any help ??

May be your ajax request raise an error. You can see it by subscribing to the error event of your datasource.
In case of error, the data are not synchronized in your datasource. In your case, I think your dataitem stay in "dirty mode" so the datasource try to insert them for each synchronization...