I'm trying to create a Extjs tree with JSON data. The data I want to load into the tree contains a folder structure. But when I trie to load the data into the tree, it doesn't show anything.
I have checked the json code here (JSONLint) on errors but everythin looks fine. Which would say that the problem probably is in the extjs part.
I have no idea how to get it works.
I have created a JSON-object like this:
{
"folders": [
{
"name": "Function",
"id": "workspace://SpacesStore/000-000-000",
"folders": [
{
"name": "Evaluation reports",
"id": "workspace://SpacesStore/00-00-4949-9caf-6655fg"
},
{
"name": "Function Reports",
"id": "workspace://SpacesStore/554gg-563-sd555-872e-0098hhjf"
},
{
"name": "Training(POP)",
"id": "workspace://SpacesStore/4334g-67hj-4357-ba96-4343fhj343"
}
]
},
{
"name": "Application data",
"id": "workspace://SpacesStore/3434gg-a761-48a2-83fa-3434f454hu",
"folders": [
{
"name": "Application letters",
"id": "workspace://SpacesStore/23232ff-c95f-4999-sdsd556-00886ggh7765"
}
]
}
]
}
This is the Extjs part where I want to load the JSON data:
initComponent: function() {
// declare a new store and load tree data
this.store = new Ext.data.TreeStore({
// set params
proxy: {
type: 'ajax',
reader: 'json',
url: 'http://localhost:8080/testApp/rest/folder/1'
}
});
this.items = [{
flex: 1
}];
this.callParent();
}
You didn't tell the reader what property to read from:
reader: {
type: 'json',
rootProperty: 'folders'
}
Related
I try to load json data with direct proxy on a cartesian chart in ext 7 like this:
https://fiddle.sencha.com/#view/editor&fiddle/3bae
In this example I load data from ajax but the return data is the same. (its actually copy pasted from my direct api). I have the same result on my testsystem: I can load hardcoded data but not from proxy.
How do I have to format the data so it populates my chart?
the root property of your JSON must be 'result.data'
the data are object, NOT an Array
For yor custom JSON you can write reader transformer, something like this:
...
...
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
rootProperty: 'data',
fields: ['month', 'value'], // What is it?
transform: {
fn: function (data) {
return Object.values(data.result.data);
},
scope: this
}
}
},
autoLoad: true
});
Or you can change the backend to generate standard extjs json, sample:
{
"users": [
{
"id": 1,
"name": "Ed Spencer",
"email": "ed#sencha.com"
},
{
"id": 2,
"name": "Abe Elias",
"email": "abe#sencha.com"
}
]
}
I have a Kendo grid where I'm trying to add a delete feature. My datasource looks like:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: Router.action("Admin", "GetScansForMailItem", { mailItemIdnt: detailinit.data.MailItemIdnt }),
dataType: "json"
},
destroy: {
url: Router.action("Admin", "DeleteScan"),
type: "post"
}
},
model: {
id: "ScanIdnt",
fields: {
ScanIdnt: {editable: false, nullable: false}
}
},
pageSize: 5
});
I added the model part because this answer, however it made no difference.
The actual grid looks like:
.kendoGrid({
dataSource: datasource
scrollable: false,
sortable: true,
pageable: true,
editable: "inline",
columns: [{
field: "ScanIdnt",
title: "Scan ID"
}, {
field: "CreatedDate",
title: "Created",
template: "#= kendo.parseDate(CreatedDate, 'yyyy/MM/dd') #"
}, {
field: "ScanDocumentRelativePath",
title: "File Path",
template: "<a href='/CAMP/Admin/Download?scanIdnt=#= ScanIdnt #'>#= ScanDocumentRelativePath.substring(1) #</a>"
}, {
field: "ScanUserIdnt",
title: "Scanned By"
},{
command: "destroy",
title: ""
}]
});
Strangely, clicking the delete button removes the from the gird on the UI, but there is absolutely no Ajax call is made the the destroy URL. I can't seem to figure out why. Any ideas?
EDIT I'd like to point out that this grid is in fact a nested grid inside of another grid (like here) I discovered that the parent grid handles actually makes a call, but to the wrong function. For some reason, it clicking delete on a to level item calls the read function of the nested grid, however, the nested grids do nothing
Figured it out (sorta). While I think there were many issues with my code and the grid, It seems that when it came down to it, Kendo didn't like how I had my data.
In the Kendo docs related to hierarchical grids, the data for the child grid is stored in a field of the data for the parent. For example, given the following JSON:
"ParentItems": [
{
"Id": 12345 ,
"Name": "Test1",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
},
{
"Id": 12346 ,
"Name": "Test2",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
}
]
In the parent grid, each ParentItem would display it's respective ChildItems in the child grid.
On the other hand, I was pulling both data sets separately. Basically, I pulled the ParentItems like:
"ParentItems": [
{
"Id": 12345,
"Name" : "Test1"
},
{
"Id": 12346,
"Name" : "Test2"
}
]
And then made a second request to pull the child items, based on the parent's id.
"ChildItems": [
{"Id": 1, "Name": "Test", "ParentId": "12345"},
{"Id": 2, "Name": "Test", "ParentId": "12345"}
]
I was able to modify the server side code to serve the data like in the very first example and managed to get things working. The specific document that helped me out can be found here
I am using backbone's fetch method to retrieve a set of JSON from the server. Inside the fetch call, I have a success callback that correctly assigns attributes to a model for each object found.
var foo = assetCollection.fetch({
reset: true,
success: function(response){
var data = response.models[0].attributes.collection.items;
data.forEach(function(data){
assetCollection.add([
{src_href: data.data[0].value,
title: data.data[1].value
}
]);
});
console.log(assetCollection.models)
}
})
Right now I am working with a static set of JSON that has two objects. However, logging assetCollection.models returns three objects: the first is the initial server JSON response, while the next two are correctly parsed Backbone models.
How do I keep Backbone from adding the first object (the entire response from the server) to its set of models, and instead just add the two JSON objects that I am interested in?
The JSON object returned from the server is as follows:
{
"collection": {
"version": "1.0",
"items": [
{
"href": "http://localhost:8080/api/assets/d7070f64-9899-4eca-8ba8-4f35184e0853",
"data": [
{
"name": "src_href",
"prompt": "Src_href",
"value": "http://cdn.images.express.co.uk/img/dynamic/36/590x/robin-williams-night-at-the-museum-498385.jpg"
},
{
"name": "title",
"prompt": "Title",
"value": "Robin as Teddy Roosevelt"
}
]
},
{
"href": "http://localhost:8080/api/assets/d7070f64-9899-4eca-8ba8-4f35184e0853",
"data": [
{
"name": "src_href",
"prompt": "Src_href",
"value": "http://b.vimeocdn.com/ts/164/830/164830426_640.jpg"
},
{
"name": "title",
"prompt": "Title",
"value": "Mrs. Doubtfire"
}
]
}
]
}
}
You should modufy collection.
Probably you should change parse method:
yourCollection = Backbone.Collection.extend({
parse: function(data) {
return data.models[0].attributes.collection.items;
}
})
When you use fetch Backbone parse result and add all elements what you return in parse.
Using the tutorial given here, I am making an app to fetch json data from a URL and display it. I am using this code to call the URL and parse.
{
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
cls: 'blog',
displayField: 'title',
store: {
type: 'tree',
fields: ['uuid', 'display'
],
root: {
leaf: false
},
proxy: {
type: 'scripttag',
url: 'http://localhost:8081/openmrs-standalone/ws/rest/v1/location',
reader: {
type: 'json',
rootProperty: 'results'
}
},
},
},
In the console i am getting response in the form
{
"results": [
{
"uuid": "c0937f0c-1691-11df-97a5-7038c432aabf",
"display": "Chulaimbo",
"links": [
{
"uri": "http://localhost:8081/openmrs-standalone/ws/rest/v1/location/c0937f0c-1691-11df-97a5-7038c432aabf",
"rel": "self"
}
]
},
{
"uuid": "c0937d4f-1691-11df-97a5-7038c432aabf",
"display": "Mosoriot Hospital",
"links": [
{
"uri": "http://localhost:8081/openmrs-standalone/ws/rest/v1/location/c0937d4f-1691-11df-97a5-7038c432aabf",
"rel": "self"
}
]
},
{
"uuid": "8d6c993e-c2cc-11de-8d13-0010c6dffd0f",
"display": "Unknown Location",
"links": [
{
"uri": "http://localhost:8081/openmrs-standalone/ws/rest/v1/location/8d6c993e-c2cc-11de-8d13-0010c6dffd0f",
"rel": "self"
}
]
}
]
}
but its showing an error
"location" is the name of the service.
The console believes you are trying to execute the JSON as code. So after the first {, it expects instruction. Not data. Try putting parentheses around the entire thing:
{ myfield: 1, anotherfield: 2 } (ERROR)
({ myfield: 1, anotherfield: 2 }) (SUCCESS)
This will resolve the issue.
I have done it using a different method. I used proxytype 'rest' and run OpenMRS and my application on the same server and port otherwse my instance of OpenMRS wont allow cross-domain calls. The problem in this question was using type as "scripttag" which i still dont know what is the problem with it.Using "rest" resolves it.
I have written a function which scans all the files/directory in a given directory and returns a json object. I need to display this json object on the UI using jstree. I have written the function in go using recursion to scan all the files and directories rooted at that particular folder.
This is the type I am using to construct the whole structure
type Directory struct {
Name string "data"
SubDirs []Directory "children"
}
Now jstree accepts data structs of the following format.
json_data: {
data: [
"f1",
"f2",
{
data: "f3",
children: ["f4", "f5"]
}
]
}
and not of the format :-
json_data: {
data: [
{
"data": "f1",
"children": []
}
{
"data": "f2",
"children": []
}
{
data: "f3",
children: ["f4", "f5"]
}
]
}
(when I pass the above data structure format, it doesn't work probably since the "children" thing is null)
Thus the data structure Directory I have maintained doesn't suffice to construct the directory structure.
How do I solve this problem of constructing the Directory tree homogeneously?
The final one is not even valid JSON. The spec defines that empty arrays are valid and allowed. Try:
{
"data": [
{
"data": "f1",
"children": []
},
{
"data": "f2",
"children": []
},
{
"data": "f3",
"children": [
"f4",
"f5"
]
}
]
}
Use JSONLint to validate your JSON objects.