JsTree-grid doesn't display the data - javascript

I'm working with the JsTree Ajax lazy load feature and to display the data I am using JsTree-grid. However, I am having the issue with display the data using the JsTree-grid on the second column. I've the following JSON data that I'm passing through the PHP using the JsTree ajax lazy load feature:
[
{
"id": ​157749,
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo",
"text": "Script 1: Login",
"data": {
"status": "Fail"
}
},
{
"id": ​104511,
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo",
"text": "skip",
"data": {
"status": "Pass"
}
}
]
In the Javascript I've the following code:
$('#jstree').jstree({
plugins: ['grid'],
'grid': {
'columns': [
{
'width': 50,
'header': 'Nodes'
},
{
'width': 30,
'header': 'Status',
'value': function (node) {
return (node.status);
}
}
]
},
'core' : {
'data' : {
"url" : function (node) {
return node.id === '#' ? 'node' : 'tree/' + node.id;
},
'data' : function (node) {
return { 'id' : file.id, 'title' : file.title };
},
"dataType" : "json"
}
}
});
Note: When I console log the node on here: 'value': function (node) { console.log(node); } I got the following result on the console:
Object { status: "Fail" }
Object { status: "Pass" }
I would like to display the status Pass or Fail on the second JsTree-grid column. However, the JsTree-grid isn't displaying the data and I'm even not getting any error on the console. Please, can someone help me regarding what I want to achieve.

I see two issues here:
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo"; your json doesn't have any parents for these nodes
you don't need function here - 'value': function (node) { return (node.status); }, simply use 'value': 'status'.
After fixing these two issues it works, check demo - Fiddle.

Related

Add link to Ajax sourced data in jQuery Datatables

I want to add a link/href to the 2nd column (the one with "C" data in it). I have tried the columns render function but it only has data of the current column.
https://datatables.net/reference/option/columns.render
I want to use data from different columns onto anchor tag of column 2
this guy here
https://stackoverflow.com/a/47696609/11575565
explains using rowID which would've solved my problem but this isnt working.
I tried using $.getJSON and append() over ajax function but it doesnt work as well.
$(document).ready(function() {
var table = $('#bla').DataTable({
"ajax" : "blist.json",
"columns" : [
{ "data" : null,defaultContent: "-" },
{ "data" : "C" },
{ "data" : "B" },
{ "data" : "D" },
{ "data" : null,defaultContent: "-" },
{ "data" : null,defaultContent: "-" },
],
[the array in blist.json has data "A","B","C","D","E"]
Say, your Link value is in key E then, you would be able to use render as shown below.
"columns" : [
{ "data" : null,defaultContent: "-" },
{ "data" : "C",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '' + data + '';
}
return data;
}
},
{ "data" : "B" },
{ "data" : "D" },
{ "data" : null,defaultContent: "-" },
{ "data" : null,defaultContent: "-" },
]

How to retrieve data from realtime database using indexOn in cloud functions

Firebase structure:
{
"config" : [
{
"config1" : {
"hideimage" : true
}
},
{
"config2" : {
"hideimage" : false
}
}
]
}
Database rules:
"config": {
".indexOn": ["hideimage"]
}
I'm trying to retrieve all config items that have hideimage attribute set to true using:
admin.database().ref('config').orderByChild("hideimage").equalTo(true).once('value', result => {});
The expected result should be:
[{
"config1" : {
"hideimage" : true
}
}]
but I'm retrieving a null response without getting any error.
Your data structure contains two nested levels:
you have an array
inside the first array element, you have config1 and config2
You can see this if you look at the Firebase console, where your data will show like:
{
"config" : {
"0": {
"config1" : {
"hideimage" : true
}
},
{
"config2" : {
"hideimage" : false
}
}
}
}
Firebase can only query nodes in a flat list, not a tree. So with your current data structure it can only find the node with hideimage=true under /config/0, not under all /config children.
Since you're already naming your config1 and config2 uniquely, I think the array may be a mistake, and you're really looking for:
{
"config": {
"config1" : {
"hideimage" : true
},
"config2" : {
"hideimage" : false
}
}
}
With this data structure your query will work.

JsTree-grid undefined value from JSON

JsTree-grid plugin won't work as expected for me. I am getting node data (including data for grid columns) by AJAX request responding by JSON file.
JS snippet:
.jstree({
'core' : {
'data' : {
'url' : '/cms/ajax/ajax_json_tree.php?table=subpages_tree&operation=get_node',
'data' : function (node) {
return {
'id' : node.id,
'seo_title' : node.seo_title
};
},
'dataType' : 'json'
},
'check_callback' : true,
'themes' : {
'responsive' : false
}
},
'plugins' : ['state','dnd','contextmenu','grid'],
grid: {
columns: [
{width: 300, header: "Name"},
{width: 100, header: "SEO", value: "seo_title"}
]
},
'force_text' : true
})
JSON response from:
/cms/ajax/ajax_json_tree.php?table=subpages_tree&operation=get_node
[
{
"id":255,
"text":"NEWS",
"children":true,
"seo_title":"news"
},
{
"id":256,
"text":"DEVWEBMAIL",
"children":false,
"seo_title":"devwebmail"
}
]
Somehow node.seo_title is always undefined. Can you explain why this is? It seems the problem is with the grid plugin integration in jstree.
Versions: I am using jstree 3.3.3.0 and jstreegrid 3.4.2.
Finally, I`ve make it work. The problem was in JSON data file. It has to have a bit different data structure:
[
{
"id":255,
"text":"NEWS",
"children":true,
"data" {
"seo_title":"news"
}
},
{
"id":256,
"text":"DEVWEBMAIL",
"children":false,
"data" {
"seo_title":"devwebmail"
}
}
]

Not able to Parse JSON from Jenkins properly

I'm trying to parse JSON from Jenkins's API using request
request({method: 'GET', url}, function(error, response, body) {
console.log(body.toString());
var output_json = JSON.parse(body.toString());
console.log(output_json);
}
After I parse the JSON usingJSON.parse(), few values in the tags are lost.
Console output of text output before parsing JSON
{
"_class" : "My.FreeProject",
"actions" : [
{
},
{
"_class" : "FreeProject.Property",
"parameterDefinitions" : [
{
"_class" : "org.choice.Parameter",
"defaultParameterValue" : {
"_class" : "Property",
"value" : "master19.7.0"
},
"description" : "",
"name" : "BUILD_TAG",
"type" : "ChoiceParameter"
},
{
"_class" : "Parameter",
"defaultParameterValue" : {
"_class" : "Value",
"value" : ""
},
"description" : "Random Text",
"name" : "MY_TEST",
"type" : "StringParameterDefinition"
},
{
"_class" : "org.myclass",
"defaultParameterValue" : {
"_class" : "org.newclass"
},
"description" : "",
"name" : "TESTING",
"type" : "NodeParameterDefinition"
}
]
},
{
Console output of text output after parsing JSON
{ _class: 'My.FreeProject',
actions:
[ {},
{ _class: 'FreeProject.Property',
parameterDefinitions: [Object] },
{},
{},
{},
{},
{},
{},
{},
{},
{ _class: 'com.myclass' } ],
So after parsing JSON, I'm losing some of the text values. Is there a way I could retrieve all the information of the JSON from Jenkins? Thanks
It doesn't look like anything is missing. The value of parameterDefinitions is just collapsed. Either there is a toggle you can click on to expand it, or use console.dir instead.
Example from the Chrome console. Note how it shows [Array[1]] instead of [[[[]]]] after parsing the string into an object. However, the values is still four nested arrays.

JsTree with custom json data

I have this structure in json I can not be modified by request.
{
"Object": [
{
"url": "http://www.google.com"
}
],
"id": 1,
"name": "Redirection Rule",
"Object": {
"frequency": 1,
"trigger": 1
},
"Object": {
"http": "Redirect Url",
"response": 301
}
}
I need to use this structure to populate a jstree . I just need to use the "id" fields and "name", how do I set jstree to use "name" instead of "text" as a node name ?
Either:
1) use the jQuery dataFilter option (this means defining a function for dataFilter in your core.data jsTree config),
or
2) set core.data itself to a function, manually make the request and transform it like so:
$('#your-tree').jstree({
core : {
data : function (node, cb) {
$.ajax({ url : ... }).done(function (data) {
cb([{ "id" : data.id, "text" : data.name }])
});
}, ...
You can find more info on setting core.data to a function here:
https://github.com/vakata/jstree#populating-the-tree-using-a-callback-function

Categories