I am trying to populate datatable on click.
Initially I have this configuration:
var json = [];
var shippingMethodsTable = $("#shipping-methods-table").DataTable({
'data': json,
"columns": [
{ "data": "ShippingMethodId" },
{ "data": "MethodName"},
{ "data": "Code"},
{ "data": "ShippingTypeName" },
{ "data": "MaxWeight" }
]
});
After I click button I have json object of arrays:
json = ko.toJSON(data.shippingMethods); // I am using knockout.js to populate it
Result:
"[{"ShippingMethodId":2,"MethodName":"Priority Mail","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"},{"ShippingMethodId":4,"MethodName":"Priority Mail Express","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"},{"ShippingMethodId":5,"MethodName":"First-Class Mail","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"13 oz"},{"ShippingMethodId":6,"MethodName":"USPS Retail Ground","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"},{"ShippingMethodId":8,"MethodName":"Media Mail","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"}]"
And then I am trying to update datatable
shippingMethodsTable.clear();
shippingMethodsTable.rows.add('{"data":' + json + '}');
shippingMethodsTable.draw();
But getting an error: Requested unknown parameter 'ShippingMethodId' for row 0, column 0
Method rows.add() expects array of object, rather than object.
So, try
shippingMethodsTable.clear();
shippingMethodsTable.rows.add(json);
shippingMethodsTable.draw();
instead.
Related
Hi I have the following data but cannot get DataTables to display it:
const data = [{
"School":"Arsenal 2011",
"Group":{
"Name":"Previous",
"ParentGroup":{
"Name":"Arsenal",
"ParentGroup":{
"Name":"USA",
"ParentGroup":null
}
}
},
"GroupDisplayText":null,
"Publisher":"Abbot",
"PublishedDate":"2011",
"PublishersWebsite":"http://google.com/USA/ADW%202011/Arsenal%202011.pdf"
},
{
"School":"New York 2000",
"Group":{
"Name":"New York",
"ParentGroup":{
"Name":"USA",
"ParentGroup":null
}
},
"GroupDisplayText":null,
"Publisher":"DoE",
"PublishedDate":"2000",
"PublishersWebsite":"http://google.com/USA/New York%202000%20Tables.pdf"
}];
$(document).ready(function () {
$('#example').DataTable( {
"ajax": data
} );
}
I have created a project on playcode
https://playcode.io/470603
I am getting a datatables error
DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
I have checked the json and all is ok?
Thanks
$(document).ready(function () {
$('#example').DataTable( {
data:data // ajax for to make ajax request to retrieve data.
"columns": [ // also needs to specify column config to display it
{ "data": "School" },
]
} );
}
for javascript object use data instead.
I have some JSON data looking like this:
{"data":[{"one":"[[1756.53, 2.419583], [13755.95, 0.056274], [1755.62, 0.027065], [11755.59, 0.085065], [1175.28, 906], [11752.33, 0.333531], [11752.31, 0.5], [11752.03, 0.6], [11752.02, 0.107656], [1751.99, 1.288268], ....
This json is being retrieved through a AJAX request and served to a HTML datatable:
$(document).ready(function() {
var table = $('#mytable').DataTable({
"serverSide": true,
"ajax": "/api/?format=datatables",
"columns": [
{
data: 'one',
}
]
});
setInterval( function () {
table.ajax.reload();
}, 10000 );
});
Where api is the api endpoint.
The problem with my actual code is that, when loading the HTML datatable, i will see the data being rendered like this
DATA:
[[1848, 84857], [4944, 4949], [34, 65], [3566, 78], .... ]
Basically all the JSON gets thrown in a single row of the table.
Instead, i would like to have each record in a single line, like:
DATA
1848, 84857
4944 4949
....
After investigating in the network response, i've come to the conclusion that my code sees the JSON response as a string, and not as an array with sub-elements (an array with a series of arrays, each one with two items), hence datatables cannot iterate over it.
Is there any way to fix this issue?
Actually your main problem is JSON response format. Object data should contains array of object or array of array. But now seems it was "json string" in object "one".
If you can't override your json response from server side, we can altering/relocating data source using Datatables AJAX DataSrc option.
Option of dataSrc is to provide the ability to alter what data DataTables
will read from the JSON returned from the server, or to manipulate the
data from one form into another (be it JSON to another form of JSON,
XML, YAML etc).
We need to two (2) part to solve your problem:
Relocate JSON data using DataSrc option
Convert JSON string as object using using JSON.parse
code:
var table = $('#mytable').DataTable({
"ajax": {
"type" : "GET",
"url" : "/endpoint/?format=datatables",
"dataSrc": function ( json ) {
console.log(JSON.parse(json.data[0].one));
return JSON.parse(json.data[0].one);
}
},
"columns": [
{"data":0, "title":"col1"},
{"data":1, "title":"col2"}
]
});
Working demo:
//This is for JSON request/response mocking only. Do not use this when you have a live JSON server
$.mockjax({
url: "/endpoint/?format=datatables",
response: function(settings) {
this.responseText = {
"draw": settings.data.draw,
"recordsTotal": 4,
"recordsFiltered": 4,
"data": [
{"one":"[[1756.53, 2.419583], [13755.95, 0.056274], [1755.62, 0.027065], [11755.59, 0.085065], [1175.28, 906], [11752.33, 0.333531], [11752.31, 0.5], [11752.03, 0.6], [11752.02, 0.107656], [1751.99, 1.288268]]"}
]
}
}
});
$(document).ready(function() {
var table = $('#mytable').DataTable({
"ajax": {
"type" : "GET",
"url" : "/endpoint/?format=datatables",
"dataSrc": function ( json ) {
console.log(JSON.parse(json.data[0].one));
return JSON.parse(json.data[0].one);
}
},
"columns": [
{"data":0, "title":"col1"},
{"data":1, "title":"col2"}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="mytable" class="display nowrap" width="100%"></table>
I am trying to display a tree structure in my web project.
I am using Symfony 3.4.x with jsTree v3.3.5.
PROBLEM
I can not get the tree to display when using json and ajax.
I am using an example from official jstree documentation.
If i hard code data in json format the tree is displayed without a hitch, but when i return the same json as part of ajax call - tree is not displayed (i get only one item, displayed as a folder, without a name).
I want to display all the tree nodes fully open - so loading all items is required.
CODE
my data in json format (i am using alternative json notation as per jstree documentation)
{"success":true,
"data":[
{"id":"50","parent":"#","text":"test_root"},
{"id":"51","parent":"50","text":"test_1"},
{"id":"123","parent":"51","text":"test_2"},
{"id":"73","parent":"51","text":"test_3"},
{"id":"75","parent":"51","text":"test_4"},
{"id":"76","parent":"51","text":"test_5"},
{"id":"74","parent":"51","text":"test_6"},
{"id":"78","parent":"51","text":"test_7"},
{"id":"124","parent":"51","text":"test_8"},
{"id":"77","parent":"50","text":"test_9"}
]}
using jstree
$(document).ready(function()
{
let project_tree;
project_tree = $('#file-tree-json');
project_tree.jstree({
'core':
{
'data':
{
'url': '/tree/prepare',
'dataType': 'json',
'data': function (node) {
console.log(node);
return { 'id': node.id };
},
}
},
"types": {
"root": {
"icon": "lnr lnr-home"
},
"folder": {
"icon": "lnr lnr-folder"
},
"file": {
"icon": "lnr lnr-file-empty"
}
},
"search": {
show_only_matches: true,
search_callback: function (str, node)
{
if (node.text.toLowerCase().indexOf(str) >= 0) { return true; }
}
},
"plugins": [ "types", "search" ]
});
}
code in my controller that prepares tree items data in json format
$em = $this->getDoctrine()->getManager();
$repo_file_tree = $em->getRepository('App:FileTree');
try
{
$build_my_tree_json = $repo_file_tree->prepareJsonTree($build_my_tree);
return new JsonResponse([
'success' => true,
'data' => $build_my_tree_json
]);
}
catch (\Exception $exception)
{
return new JsonResponse([
'success' => false,
'code' => $exception->getCode(),
'message' => $exception->getMessage(),
]);
}
Other discussions on SO that are related and which i already read, but in my opinion, they did not solve the problem at hand or/and refer to jstree version that is out of date
jsTree unable to load root nodes from AJAX call
jsTree - loading subnodes via ajax on demand
JSTree - Load nodes dynamically
JStree and ajax
https://stackoverflow.com/a/22965656
CONCLUSION
What am i doing wrong?
Maybe i am overlooking some detail or technicality?
Thank you for your comments and answers.
UPDATE 1
when i am returning only data
return new JsonResponse([
$build_my_tree_json
]);
i get additional "[]" as so
[[
{"id":"50","parent":"#","text":"test_root"},
{"id":"51","parent":"50","text":"test_1"},
{"id":"123","parent":"51","text":"test_2"},
{"id":"73","parent":"51","text":"test_3"},
{"id":"75","parent":"51","text":"test_4"},
{"id":"76","parent":"51","text":"test_5"},
{"id":"74","parent":"51","text":"test_6"},
{"id":"78","parent":"51","text":"test_7"},
{"id":"124","parent":"51","text":"test_8"},
{"id":"77","parent":"50","text":"test_9"}
]]
How can one remove extra "[]" from json or reference inner array?
UPDATE 2
it works when there are returned only data about tree nodes in json format.
working example
return new JsonResponse($build_my_tree_json);
So how to make jstree work with additional data in ajax response?
There should be a way to extract all the data about tree from response that contains status and data (response as displayed in my questions CODE section).
The structure of your JSON response doesn't work well with jsTree. jsTree expects an Array of nodes. Your output structure has an array inside the data object. You should have a structure as below in your response for it to work.
[
{
"id": "50",
"parent": "#",
"text": "test_root",
"opened":true
},
{
"id": "51",
"parent": "50",
"text": "test_1"
},
{
"id": "123",
"parent": "51",
"text": "test_2"
},
...
...
]
I am writing to a json file in casperjs and am trying to add new objects to it.
json file looks like
{ "visited": [
{
"id": "258b5ee8-9538-4480-8109-58afe741dc2f",
"url": "https://................"
},
{
"id": "5304de97-a970-48f2-9d3b-a750bad5416c",
"url": "https://.............."
},
{
"id": "0fc7a072-7e94-46d6-b38c-9c7aedbdaded",
"url": "https://................."
}]}
The code to add to the array is
var data;
if (fs.isFile(FILENAME)) {
data = fs.read(FILENAME);
} else {
data = JSON.stringify({ 'visited': [] });
}
var json = JSON.parse(data);
json.visited.push(visiteddata);
data = JSON.stringify(json, null, '\n');
fs.write(FILENAME, data, "a");
This is starting off by adding an new { "visited" : [ ] } array with first couple of objects, below the existing { "visited" : [ ] } array and subsequently the script breaks because the json array is no longer valid json.
Can anybody point me in the right direction. Thank you in advance.
You have a JSON file containing some data.
You:
Read that data
Modify that data
Append the modified version of that data to the original file
This means the file now has the original data and then, immediately after it, a near identical copy with a little bit added.
You don't need the original. You only need the new version.
You need to write to the file instead of appending to it.
Change the 'a' flag to 'w'.
Have got a json file exported from mysql. One particular line is not a well represented json object, i'm trying to convert this to a proper array of object.
var data = "{"54":
{"ID":"54",
"QTY":"1",
"NAME":"Large",
"TOTAL":1.86
},
"TOTAL":10.54,
"313":
{"ID":"313",
"QTY":2,
"NAME":"Quater Pounder",
"TOTAL":8.68
}
}"
//and wants to make it:
var data = [
{"ID" : "54",
"QTY" : "1",
"NAME": "Quarter Pounder",
"TOTAL": 8.68
},
{"ID":"313",
"QTY":2,
"NAME": "Quater Pounder",
"TOTAL":8.68
}
]
I was able to fix this by using angular.forEach(response, function(item){}), I then created a childArray, which I pushed the result of the above into.
Please see code:
angular.forEach( $scope.response, function (item) {
item.childrenList = [];
angular.forEach( JSON.parse( item.details ), function (value, id) {
item.childrenList.push( value );
})
});