I'm trying to implement a JSON treeview with this plugin
My issue is this line :
$scope.structure = { folders: [
{ name: 'Folder 1', files: [{ name: 'File 1.jpg' }, { name: 'File 2.png' }], folders: [
{ name: 'Subfolder 1', files: [{ name: 'Subfile 1' }] },
{ name: 'Subfolder 2' },
{ name: 'Subfolder 3' }
]},
{ name: 'Folder 2' }
]};
In my case, I'm reading a file that returns me a JSON format
[
{
"item": {
"title": "Kids"
},
"children": [
{
"item": {
"title": "HELLO"
},
"children": []
}
]
}
]
I thought using JSON.parse(myFileContent) should have been enough for having the same data structure as in the $scope.structure but the data isn't displaying, i'm not getting errors.
How can I parse my file content to make it work ?
First, the structure should be an object, since the directive differentiates "folders" from "files". So, considering you already define child elements inside a children property, you could wrap your array (assuming it's called content) into an object like so:
$scope.structure = {
"children": content
};
Then, you'll need to override the default values for the property names in which the directive will try to get the values.
$scope.structureOptions = {
foldersProperty: "children",
displayProperty: "item.title"
};
And last, you add the tree-view-options attribute to the HTML element.
<div tree-view="structure" tree-view-options="structureOptions"></div>
Related
I'm using ng2-tree https://angular2-tree.readme.io/v3.2.0/docs/inputs plugin
When i input below json it is showing as undefined
[
{
"value": "helper",
"name": "helper",
"children": []
},
{
"value": "taxi",
"name": "taxi",
"children": []
},
{
"value": "Cake",
"name": "Cake",
"children": [
{
"name": "Chocolate Fudge Cake",
"value": "Chocolate Fudge Cake"
},
{
"name": "Carrot & Walnut Cake",
"value": "Carrot & Walnut Cake"
}
]
}
]
with above json my result is as undefined you can see them in my provided link below
here is the stackblitz link: https://stackblitz.com/edit/angular-ng2-tree-aouyza?file=app/app.component.ts
Please help me thanks in advance!!
Your data structure is wrong. The tree component received as input param a TreeModel and you're having an array of TreeModels at the moment.
Either you adjust your data structure and use a parent TreeModel to wrap your current ones as its children, like following:
tree: TreeModel = {
value: 'Parent Model',
children: [
{
value: 'helper',
name: 'helper',
children: [],
},
{
value: 'taxi',
name: 'taxi',
children: [],
},
{
value: 'Cake',
name: 'Cake',
children: [
{
name: 'Chocolate Fudge Cake',
value: 'Chocolate Fudge Cake',
},
{
name: 'Carrot & Walnut Cake',
value: 'Carrot & Walnut Cake',
},
],
}
]
};
Or you iterate over the array in the HTML and use multiple tree components. That would look like following:
<tree [tree]="t" *ngFor="let t of tree"></tree>
For more information see the Github page of ng2-tree ;)
Update:
You still need to adjust the data model the way I suggested but you can hide the empty root node. To do so, you need to do following:
HTML
<tree [tree]="tree" [settings]="{ rootIsVisible: false }"></tree>
Due to this setting a class rootless is applied which hides the empyt root node but only if you've added node_modules/ng2-tree/styles.css to your angular.json or you've added a custom implementation for that class.
You can find the settings doc here.
I am trying to incorporate a JSTree structure into my javascript project; however, the tree doesn't seem to be displaying/rendering in its parent container. Here is the code that I am using to display the tree:
let tree=this.tree_div.find('#treeDiv');
tree.jstree(
{
"json_data":
{
"data": [
{
"data": "First",
"children": [{"data": "First"},{"data":"Second"},{"data": "Third"}]
},
{
"data": "Second",
"children": [{"data":"First"},{"data":"Second"},{"data": "Third"}]
},
{
"data": "Third",
"children": []
}
],
},
"plugins": ["checkbox","themes", "html_data", "ui"]
}
).bind("select_node.jstree", function(e, data){});
console.log(tree[0]);
In this example, #treeDiv is the div that is contained by the parent container.
In the last line where the value of the tree is printed, the following line comes up in the console:
To my understanding, this implies that the tree is being successfully initialized and set up, but it still isn't displaying on the web page. Any input would be appreciated. Thanks.
The most plausible explanation here would be that you are initializing the tree using the older jsTree API, while using the newer jsTree library.
Old JSON API: https://old.jstree.com/documentation/json_data
New JSON API: https://www.jstree.com/docs/json/
The newer API has a different object structure for populating the tree. Some of the functions and events remain the same, however many other things including the configuration object has changed.
myTree.jstree({ 'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
} });
In my YUI application, I have the following valid JSON object returned from an AJAX request
{
"content": [
{
"id": 7,
"name": "Henry Wood",
"sport": {
"sportId": 1,
"sportName": "Basketball"
}
]
}
In my response, I set the data for my table starting with content
dataTable.set('data', data.content);
however, when defining my columns I can't seem to retrieve sportName using dot notation (returns blank)
{ key: 'name', label: 'Name'}, //returns Henry Wood
{ key: 'sport.sportName', label: 'Supply Chain', //doesn't work
Any ideas on how to access this nested property?
Use the formatter option for column definitions like this
formatter: function (o) {
return o.data.sport.sportName;
}
Column defs:
var cols = [{
key: 'name',
label: 'Name'
}, {
label: 'Supply Chain',
formatter: function (o) {
return o.data.sport.sportName;
}
}],
Here is a demo http://jsfiddle.net/dhirajbodicherla/expfs6xn/
bit of background: when a user clicks an element, it loads a form retrieved by an ajax call. I save a copy of the json in the controller, and when they change a value, it is to update the local json.
Let's say the json is something like this:
{
name: "questions!",
id: "0",
questions: [{
id: "1",
text: "ninjas or pirates?",
type: "radio",
answers: [{
id: "1",
text: "ninjas"
} , {
id: "2",
text: "pirates"
}],
}, {
id: "3",
text: "why?",
type: "text"
answers: []
}]
}
the element returned is a jquery-ized version of the input that was selected.
While I could iterate through each field and check, I can't help but feel like there is a better way to do it and reference it more directly. How would this be done?
I am trying to use Treeview directive from AngularJS. The stored procedure is returning xml.The tree view directive takes json format. The Controller will get the data from service.I am stuck trying to convert xml to json in service.
Following is the xml structure:
<Company Data="New Company">
<Manager Data="Working">
<Employee Data="ABC" />
<Employee Data="DEF" />
<Employee Data="GHI">
<SubEmployee Data="Approval">
<Stuff Data="Financial" />
<Stuff Data="Consol" />
</SubEmployee>
<SubEmployee Data="Rolled-Over">
<Stuff Data="Corporate" />
</SubEmployee>
</Employee>
</Manager>
</Company>
Below is the expected JSON :
[
{
label: "New Company",
id: "Company",
children: [
{
label: "Working",
id: "Manager",
children: [
{
label: "ABC",
id: "Employee",
children: [
]
},
{
label: "DEF",
id: "Employee",
children: [
]
},
{
label: "GHI",
id: "Employee",
children: [
{
label: "Approval",
id: "SubEmployee",
children: [
{
label: "Financial",
id: "Stuff",
children: [
]
},
{
label: "Consol",
id: "Stuff",
children: [
]
}
]
},
{
label: "RolledOver",
id: "SubEmployee",
children: [
{
label: "Corporate",
id: "Stuff",
children: [
]
}
]
}
]
}
]
}
]
You have two choices:
Return the data from the API in the JSON format you require
Convert the XML to JSON in your angular application using javascript.
I would recommend option 1 if that is possible. For option 2 take a look at this question which disucsses XML/JSON conversion in Javascript
"Convert XML to JSON (and back) using Javascript"
If you read the answers on the above link you will see why option 1 is preferable. Converting between these formats can be problematic.
If you have JQuery available in that page you can convert the XML into a DOM object by doing var data = jQuery(data);. Then, use jQuery selectors to extract the data you need out of it.
Some examples:
// Extract an attribute from a node:
$scope.event.isLive = jQuery(data).find('event').attr('state') === 'Live';
// Extract a node's value:
$scope.event.title = jQuery('title', data).text();
A little late but I am also having to look at this option since I will be working with a CMS that only parses into XML. Which at this stage of the game I have no clue why... but I digress.
Found this on D-Zone and it seems to have potential:
https://dzone.com/articles/convert-xml-to-json-in-angular-js
Basically, you make the request to get the XML, then convert it to JSON within another function. Granted you are still pulling XML data but you will be able to work with JSON which will save you a lot of time.
EX from Site (Requires 3rd party Plugin X2JS)
var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
console.log(response);
});
});
One more note, if you are using Angular like me then someone has already created a nice plugin service to use:
https://github.com/johngeorgewright/angular-xml