Datatables with nested array - datatables

I've posed a question about Bootstrap Tables but meanwhile I moved to Datatables as I was feeling blocked. My problem, however, is the same.
None of the two can easily handle nested JSON results. For instance if I choose "field: author", it processes the following as "[Object Object], [Object Object]".
"author": [
{
"family": "Obama",
"given": "Barack"
},
{
"family": "Obama",
"given": "Michelle"
}
I can select the results individually, say "field: author[, ].family", which returns a list like "Obama, Obama". But I want an output like "given+family1, given+family2, ..".

You can use custom rendering. DataTables allows you to define custom rendering for each column.
Here is a sample that I worked out. I am doing custom rendering for Author column.
$(document).ready(function() {
var dataSet = [
{ "name": "How to DataTables", "author": [{ "firstname": "jack", lastname: "d" }, { "firstname": "dick", lastname: "j" }] },
{ "name": "How to Custom Render", "author": [{ "firstname": "bill", lastname: "g" }, { "firstname": "scott", lastname: "g" }] }
];
$('#example').DataTable({
data: dataSet,
columns: [
{ title:"Book Name",
data: "name" },
{
title: "Authors",
data: "author",
render: function(data, type, row) {
//return data.length;
var txt = '';
data.forEach(function(item) {
if (txt.length > 0) {
txt += ', '
}
txt += item.firstname + ' ' + item.lastname;
});
return txt;
}
}
]
});
});

Related

suitescript 2.0 unable to search inventorydetails subrecord from saved search data

I have created one saved search, and I am fetching data from by suitescript and here is the demo data response which I am getting this result from saved search response
{
"results": [
{
"recordType": "itemreceipt",
"id": "2572118",
"values": {
"trandate": "2021-3-25",
"type": [
{
"value": "ItemRcpt",
"text": "Item Receipt"
}
],
"tranid": "RCV123",
"salesrep": [
{
"value": "16018",
"text": "MXZ"
}
],
"entity": [
{
"value": "16993",
"text": "ABC"
}
],
"memo": "",
"amount": "1218.00",
"location": [
{
"value": "1",
"text": "XYZ"
}
],
"inventoryDetail.inventorynumber": [
{
"value": "10504",
"text": "3566044578"
}
]
}
}
]
}
AND I AM USING BELOW CODE TO MAKE FILTER BY inventoryDetail.inventorynumber FIELD WHICH IT MENTIONED IN SAVED SEARCH RESPONSE DATA AND IT THROWS ERROR "An nlobjSearchFilter contains invalid search criteria: inventoryDetail.issueinventorynumber."
but if I used tranid instead of inventoryDetail.issueinventorynumber then it does not throw the error, why I can not filter by inventoryDetail.inventorynumber I am trying since two days but no luck, please help me guys
/**
* #NApiVersion 2.1
* #NScriptType Restlet
* #NModuleScope Public
*/
/*
------------------------------------------------------------------------------------------
Script Information
------------------------------------------------------------------------------------------
Name:
Saved Search API
ID:
_saved_search_api
*/
var
log,
search,
response = new Object();
define( [ 'N/log', 'N/search' ], main );
function main( logModule, searchModule ) {
log = logModule;
search = searchModule;
return { post: postProcess }
}
function postProcess( request ) {
try {
var searchObj = search.load( { id: 1234 } );//saved search id
// Copy the filters from rs into defaultFilters.
var defaultFilters = searchObj.filters;
// below code works
defaultFilters.push(search.createFilter({
name: "tranid",
operator: search.Operator.IS,
values: ["RCV123"]
}));
// but this code does not works and it throws error "An nlobjSearchFilter contains invalid search criteria: inventoryDetail.issueinventorynumber."
/*defaultFilters.push(search.createFilter({
name: "inventoryDetail.inventorynumber",
operator: search.Operator.IS,
values: ["3566044578"]
}));*/
searchObj.filters = defaultFilters;
searchObj.filters = defaultFilters;
response.results = [];
var resultSet = searchObj.run();
var start = 0;
var results = [];
do {
results = resultSet.getRange( { start: start, end: start + 1000 } );
start += 1000;
response.results = response.results.concat( results ) ;
response.count =results.length;
} while ( results.length );
return response;
} catch( e ) {
log.debug( { 'title': 'error', 'details': e } );
return { 'error': { 'type': e.type, 'name': e.name, 'message': e.message } }
}
}
issueinventorynumber is not a valid search Column on the inventorydetail record. You are probably looking for inventorydetail.inventorynumber. You can reference the Search Columns section for the Inventory Detail within the Records Browser.
Be aware that Search Column names are not always the same as the field ID in the UI, as is the case here. The ID in the UI is issueinventorynumber, while the ID for the Search Column is inventorynumber.
Finally I found the solution
var transactionSearchObj = search.create({
type: "transaction",
filters:
[
["formulatext: {inventorydetail.inventorynumber}","contains","30124578547"]
],
columns:
[
search.createColumn({name: "trandate", label: "Date"}),
search.createColumn({name: "type", label: "Type"}),
search.createColumn({name: "tranid", label: "Document Number"}),
search.createColumn({name: "salesrep", label: "Sales Rep"}),
search.createColumn({name: "memo", label: "Memo"}),
search.createColumn({name: "amount", label: "Amount"}),
search.createColumn({name: "location", label: "Location"}),
search.createColumn({
name: "itemid",
join: "item",
label: "Name"
}),
search.createColumn({
name: "inventorynumber",
join: "inventoryDetail",
label: " Number"
})
]
});
return transactionSearchObj.run().getRange( { start: 0, end: 0 + 1000 } );

Lodash: filter multiple properties

I am new to lodash.
I am having trouble filtering with lodash. I have a deep nested json object that I want to filter if productName = 'Lotto' and the board selectionMethod = "AUTOPICK"
When I try the solution below, it returns all results instead of filtering. I have tried multiple ways to do this but I always get all results returning.
Could anyone offer a suggestion?
var results = {
"buyTicketDetails": {
"result": 0,
"message": "Success",
"product": [
{
"productName": "Lotto",
"displayPromoMessage": false,
"drawDetails": [
{
"drawTypeDescription": "REGULAR DRAW",
"drawAttribute": "EVENING",
"drawStartDate": "2019-01-12T00:00:00.000-05",
"drawEndDate": "2019-01-12T00:00:00.000-05"
},
{
"drawTypeDescription": "SPECIAL DRAW",
"drawAttribute": "EVENING",
"drawStartDate": "2019-01-12T00:00:00.000-05",
"drawEndDate": "2019-01-12T00:00:00.000-05"
}
],
"board": [
{
"boardType": "REGULAR",
"selectionMethod": "AUTOPICK",
"selectionSet": [
"2",
"4",
"10",
"12",
"17",
"31"
]
},
{
"boardType": "RAFFLE",
"selectionMethod": "SYSTEMPICK",
"selectionSet": [
"40001722-01"
]
}
]
},
{
"productName": "Encore",
"displayPromoMessage": false,
"drawDetails": [
{
"drawTypeDescription": "REGULAR DRAW",
"drawAttribute": "EVENING",
"drawStartDate": "2019-01-12T00:00:00.000-05",
"drawEndDate": "2019-01-12T00:00:00.000-05"
}
],
"board": [
{
"boardType": "REGULAR",
"selectionMethod": "SYSTEMPICK",
"selectionSet": [
"3440514"
]
}
]
}
]
}
}
const filterCat = _.filter(results, { product: [
{
productName: "Lotto",
board: {
selectionMethod: "AUTOPICK"
}}
]
}
);
console.log(filterCat);
With Pure JS.
You can do this with Javascript's filter function too.
filter function actually works on Arrays, so we use map loop to add objects into arrays first, then we use filter function to get only the data we need!.
let Product = results.buyTicketDetails.product
let getSelectionMethods=(index) => Product[index].board.map((d,i)=>d.selectionMethod)
let getTargetedProducts =(Name,Method)=> Product.map((d,i)=>{
if(Product[i].productName==Name && getselectionMethods(i).indexOf(Method) !==-1){
return d
}
})
let FilteredProducts = getTargetedProducts("Lotto","AUTOPICK").filter((d)=>d !==undefined)
console.log(FilteredProducts)

Use object instead of array in datatables

When using datatables, I get 'no data available in table' when using an object instead of array:
var data1 =
{
"status": "success",
"districts": {
"1": {
"district_number": "1",
"district_name": "district one"
},
"2": {
"district_number": "2",
"district_name": "district two"
}
},
"time": "1.109s"
};
var table1 = jQuery("#data_table1").DataTable({
"data": data1.districts,
"aoColumns": [
{ "mData": "district_number" },
{ "mData": "district_name" }
]
});
I can get an array to display in a datatable using mData as follows:
var data2 =
{
"status": "success",
"districts": [
{
"district_number": "1",
"district_name": "district one"
},
{
"district_number": "2",
"district_name": "district two"
}
],
"time": "1.109s"
};
var table2 = jQuery("#data_table2").DataTable({
"data": data2.districts,
"aoColumns": [
{ "mData": "district_number" },
{ "mData": "district_name" }
]
});
https://jsfiddle.net/w93gubLv/
Is there a way to get datatables to utilize the object in the original format, or must I convert the object to an array?
You can write your own function to convert one format to another, for example:
function formatData(data){
var result = [];
for(prop in data){
if(data.hasOwnProperty(prop)){
result.push( data[prop] );
}
}
return result;
}
You can then later use it to pass data to jQuery DataTables as shown below.
var table1 = jQuery("#data_table1").DataTable({
"data": formatData(data1.districts),
"aoColumns": [
{ "mData": "district_number" },
{ "mData": "district_name" }
]
});
See updated jsFiddle for code and demonstration.

How DataTables determine columns type

I have a dynamic table enhanced by jQuery DataTables, which display a custom object similar to this example.
JSON:
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": {
"display": "SomeString",
"timestamp": 1303686000
},
"office": "Edinburgh",
"extn": "5421"
},
// ... skipped ...
]}
JavaScript:
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp"
} },
{ data: "salary" }
]
} );
} );
The difference is that I dynamically build the columns configuration, because the columns can be in any order, and others columns can be added or removed from the list. For this example (my case is very similar) the problem is that for some reason the timestamp property is ordered as a String instead of being ordered as a number.
I discovered that after setting the column "type" as "number" the ordering works perfectly. I'm presuming that DataTables is auto detecting the column as "String" for some reason (maybe because the display element is a string).
How does DataTables set the type of the columns, when is not explicitly declared?
Edit 1
I made a sample code to show the problem
http://jsfiddle.net/Teles/agrLjd2n/16/
jQuery DataTables has built-in mechanism for type detection. There are multiple predefined functions for various types with fallback to string data type.
It's also possible to use third-party plug-ins or write your own.
There are multiple ways to specify data type, below are just the few.
SOLUTION 1
Use type option.
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: "start_date.display", type: "date" },
{ data: "salary" }
]
} );
} );
SOLUTION 2
Use returned JSON data for type detection, see columns.data for more information.
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp",
type: "start_date.timestamp",
} },
{ data: "salary" }
]
} );
} );
DataTables always check the "type" property of the column "data" to auto detect the type of the column, if no "type" property is specified it will check the default value "_".
So if you want DataTables to auto detect the type of the column checking the type of your "sort" property you should set the "type" property of data to be equals to your "sort" value
Here is a sample code with different approchs to achieve what I was tryng to do. Thanks #Gyrocode.com and #davidkonrad.
var Cell = function(display, value) {
this.display = display;
this.value = value;
}
$(document).ready(function() {
var cells = [
new Cell("120 (10%)", 120),
new Cell("60 (5%)", 60),
new Cell("30 (2.5%)", 30)
];
$('#example').DataTable( {
data: cells,
columns: [
{
title : "Column NOT OK",
data: {
_: "display",
sort: "value"
}
}, {
type : "num",
title : "Column Ok setting column type",
data: {
_: "display",
sort: "value"
}
}, {
title : "Column Ok changing default value",
data: {
_: "value",
display: "display",
filter: "display"
}
}, {
title : "Column Ok setting data type",
data: {
_: "display",
sort: "value",
type: "value"
}
}, {
type : "num",
title : "Column Not OK",
data: "display"
}
]
} );
} );

dataTables make <tr> clickable to link

I have a dataTables table at http://communitychessclub.com/test.php
My problem is I need to make an entire table row clickable to a link based on a game#. The table lists games and user should click on a row and the actual game loads.
I am unable to understand the previous solutions to this problem. Can somebody please explain this in simple terms?
I previously did this at http://communitychessclub.com/games.php (but that version is too verbose and does disk writes with php echo)
with
echo "<tr onclick=\"location.href='basic.php?game=$game'\" >";
<script>$(document).ready(function() {
$('#cccr').dataTable( {
"ajax": "cccr.json",
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
}
],
"columns": [
{ "data": "game" },
{ "data": "date" },
{ "data": "event" },
{ "data": "eco" },
{ "data": "white_rating" },
{ "data": "white" },
{ "data": "black_rating" },
{ "data": "black" }
]
} );
} );</script>
"cccr.json" looks like this and is fine:
{
"data": [
{
"game": "5086",
"date": "09/02/2013",
"event": "135th NYS Ch.",
"eco": "B08",
"white": "Jones, Robert",
"white_rating": "2393",
"black": "Spade, Sam",
"black_rating": "2268"
},
...
You can do it this way:
Use fnRowCallback to add a game-id data-attribute to your datatable rows
...
{ "data": "black" }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
//var id = aData[0];
var id = aData.game;
$(nRow).attr("data-game-id", id);
return nRow;
}
This will give each row in your table a game id attribute e.g:
<tr class="odd" data-game-id="5086">
Then create a javascript listener for the click event and redirect to the game page passing the game id taken from the tr data-attribute:
$('#cccr tbody').on('click', 'tr', function () {
var id = $(this).data("game-id");
window.location = 'basic.php?game=' + id;
}