JsTree-grid undefined value from JSON - javascript

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"
}
}
]

Related

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.

how to access to json fields with webix and get data

I'm beginner with webix, Just started to link with mongodb.
Now, I started loading my data from my DB.
But when it comes to deal with Objects, I can't get the data.
webix.ready(function () {
var grida = webix.ui({
container: "testA",
id: "pivot", url: "/rent", save: "rest->/rent",
view: "pivot",
height: 400,
width: 1000,
max: true,
structure: {
rows: ["from"],
columns: ["created"],
}
});
});
and this is my json field that I copied from my mongoDB.
"from" : {
"agency" : ObjectId("554"),
"place" : ObjectId("554dc4"),
"date" : ISODate("2014-08-09T06:00:00.000+0000"),
"completed" : false
},
First, how to access to the data inside the object?
Thanks for your help :)
You can use "scheme" to preprocess data before loading it in the pivot
webix.ui({
id: "pivot",
scheme:{
$init:function(obj){
obj.phone = obj.phones? obj.phones[0].number : "Empty"
}
}

Mapping List within ArrayList - Ext js 4 model

I need to map my List that's with in list but couldn't do it .
I tried using hasmany but it wont help .
Unless its mapping i'm unable to loop my tpl as its not detecting the proper objects.
Below is my Json:
{
"containers":[
{
"count":654,
"week":47
},
{
"count":779,
"week":48
}
],
"vessels":[
{
"count":44,
"week":47
},
{
"count":39,
"week":48
}
]
}
My model :
Ext.define('ContainerChartStore', {
extend : 'Ext.data.Model',
fields : [{
name : "containers",
type : Ext.data.Types.List
},{
name : "vessels",
type : Ext.data.Types.List
}],
hasMany: {
model: 'InboundObjects',
name: 'inboundObjects'
}
});
Ext.define('InboundObjects', {
extend: 'Ext.data.Model',
config: {
fields : [{
name : "count",
type : Ext.data.Types.NUMBERARRAY
},{
name : "week",
type : Ext.data.Types.NUMBERARRAY
}]
}
});

JsTree-grid doesn't display the data

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.

jstree incompatible checkbox and types plugin

I'm creating a tree using the jstree javascript library while using two jstree plugins:
checkbox plugin
types plugin
Here is a code example with
var mydata=[
id: "1",
parent: "#",
text: "node1",
},
{
id: "2",
parent: "#",
text: "node2",
type: "nodeattribute",
}];
$('#dqResultsJSTree').jstree(
{
'core' : {
'themes' : {
'variant' : 'large',
'icons' : false,
},
'data' : mydata,
},
'types' : {
'nodeattribute' : {
'icon' : 'http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/24/Letter-A-lg-icon.png',
},
},
'checkbox' : {
cascade : "",
three_state : false,
},
'plugins' : [ 'checkbox', 'types'],
});
The problem I'm having is that the type is not working. The node with id=2 does not show the icon defined at type nodeattribute. Does anybody have had this problem using while using the checkbox at the same time?
Thanks in advance.
Source: https://www.jstree.com/plugins/
You have to set 'icons': true in the core section of jsTree config.
I also fixed your JSON - need a { for first object in mydata.
See demo: JS Fiddle

Categories