How can I load up jstree with inline Json? - javascript

Here's the jstree code:
$("#tree").jstree({
"json_data": {
"data": treedata,
"progressive_render": true
},
"plugins": ["themes", "json_data"]
});
where treedata contains some Json. Unfortunately, nothing's rendering. The examples I've found are for ajax-loading the Json, but I'm proving the concept with inline Json for now. It's valid Json, but jstree isn't rendering anything at all.
Can anyone tell what I'm doing wrong?
"tree" is a valid <div>

Is your treedata json or a json string? If it's a json string you need to use var treedata= $.parseJSON(treedatastring); first.
I use this code in a current page and it works. I know you say your json is valid, but you might want to post it anyway or test it at this site
var jsonConverted = $.parseJSON(jsonData);
$('#tree').jstree({
"json_data": {
"data": jsonConverted
},
"themes": {
"theme": "default",
"url": "/Content/Styles/Default/themes/default/style.css",
"dots": false
},
"plugins": ["themes", "json_data", "ui", "crrm"]
});
Where jsonData= '[{"attr": { "id": "someid"}, "data": { "title":"SomeTitle", "icon": "/Content/images/FolderIcon.png"}, "children":[]}]';
Be sure of your single and double quotation marks, because it makes a big difference.

Related

Preserve page number in jquery datatable pagination while sorting

I have implemented a jquery datatable in asp mvc. The records are being fetched correctly, and the sorting working correctly. The data table operates via the server side.
However, I encountered a small issue. When I am on page 3 of the datatable, I perform a sorting but the datable refreshes, returns to page 1 and only sorts records on page 1. What I want to achieve is to make sorting only on the current page that I am.
I have tried making the stateSave to true like: But the issue persists.
var table = $('#employeetable').DataTable({
"ajax": {
"url": "/Employee/GetList",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "Name", "name": "Name" },
{ "data": "Office", "name": "Office" },
{ "data": "Position", "name": "Position" },
{ "data": "Age", "name": "Age" },
{ "data": "Salary", "name": "Salary" },
],
"serverSide": true,
"order": [0, "asc"],
"processing": true,
"stateSave": true
});
Can someone please help to resolve this ?
When you sort with DataTables, you sort the entire data set, not just the visible values. So any change in the sort order, would naturally be a new list, so would return you to page 1. It's not possible to just search within the current page, thereby keeping the pagination identical. See this thread here, where more details are given as to why this isn't (and shouldn't be) possible.

Why are some JSON attributes omitted?

I have a JSON object that I'm working with. It's the result of an HTTP GET request.
The expected results are the following:
{
"name": {
"type": "string"
},
"authors": {
"collection": "users",
"via": "IDPid"
},
"id": {
"type": "integer",
"autoIncrement": true,
"primaryKey": true,
"unique": true
}
}
The actual results are the following (The authors attribute is omitted):
{
"name": {
"type": "string"
},
"id": {
"type": "integer",
"autoIncrement": true,
"primaryKey": true,
"unique": true
}
}
Why did it take out the authors attribute?
However, when I debug this in Chrome, though the authors attributes is still omitted, I am able to execute console.log(response.authors) and it reads it fine.
Also, when I go to the Network tab on Chrome dev tools to see the response of the HTTP request, it shows the missing attribute in the response body just fine.
I found out the problem. It was because console.log doesn't run right away. It runs after some time. I had other code that modified the object, but console.log ran after that code for some reason, even though I wrote it before.

Strongloop Loopback: Filter by id of related Model

I have a Strongloop Loopback Node.js project with some models and relations.
The problem at hand
My problem relates how to query only those Media instances that have a relation to a certain Tag id, using the Angular SDK - while not querying Tags.media (which return Tag instances), but instead making a query somehow that returns plain Media instances.
Please read below for specific information..
Spec
Basically, I have a Model Media which has many 'tags' (model Tag). Think of a image file (Media) having various EXIF tags (Tag). Here is the relation spec (this all works as expected):
Media (media.json):
{
"name": "media",
"base": "PersistedModel",
"properties": {
"id": {
"type": "string",
"id": true
}
},
"relations": {
"tags": {
"type": "hasAndBelongsToMany",
"model": "tag"
}
}
Tag (tag.json):
{
"name": "tag",
"base": "PersistedModel",
"idInjection": true,
"properties": {
"name": {
"type": "string",
"required": true
}
},
"relations": {
"medias": {
"type": "hasAndBelongsToMany",
"model": "media"
}
},
"acls": [],
"methods": []
}
Solutions
Now, I know I could do a query like this (using Angular SDK in my example, but the syntax is the same):
injector.get('Tag').find({
'filter': {
'include': 'medias',
'where': {'id': <mytagid>}
}
});
My problem with this approach is, that I receive 1 (one) Tag instance with attached Media instances. This disrupts why whole workflow as I deal only with Media instances.. i just want to filter by Tag id, not bother about Tag at all.
Bottom line
If I see the API explorer (/explorer/), the return value of GET /api/tags/<myTagID>/medias is exactly what I need - an array of Media objects - but how to query them exactly like this using the Angular SDK (lb_services)?
I had a similar problem. One recommendation is to open the lb-services.js and try to find: /tags/:id/medias or something similar. Then you will find a comment like this: // INTERNAL. Use Tags.medias() instead. Or something similar. So that is the method that you should call. Do not call the "prototype$__get....." methods.
Then just call what it says there I suppose: Tag.medias({id:})
Other suggestions:
As you said in your description Media has many Tags. So why not use just
{
"name": "media",
"base": "PersistedModel",
"properties": {
"id": {
"type": "string",
"id": true
}
},
"relations": {
"tags": {
"type": "hasMany", <---------- hasMany
"model": "tag",
"foreignKey": "tagId" <---FK name
}
}
and
for the tags just belongsTo as type.
{
"name": "tag",
"base": "PersistedModel",
"idInjection": true,
"properties": {
"name": {
"type": "string",
"required": true
}
},
"relations": {
"medias": {
"type": "belongsTo",
"model": "media",
"foreignKey": "mediaId" <---FK name
}
},
"acls": [],
"methods": []
}
But really I don't think this is the problem because you said when you request GET /api/tags/<myTagID>/medias it returns what you want.
Then, in AngularJS you can use:
Media.tags({id:<mediaId>})
for media/:id/tags
and for the other side try:
Tag.medias({id:<tagId>})
Tag.find({
filter:{
where:{mediaId: <mediaId>} <----mediaId comes from FK name
}
})
In this case both are persistent models there is no problems, I had permission problems when doing a similar thing with data that extends User type. But that is another story...
Hope this is helpful, I changed some stuff from a similar app that I am doing and hope not making so many errors when adapting to your code...

Using ng-repeat with keys in an array

I have an object, simulating a Cassandra database, where I retrieve its data to display it on a AngularJs app. Unfortunately, I can't make a premade header for my array because the keys are subject to change, depending on the data I'll retrieve (Here's an example of what I'm talking about):
var columnFamilyData = {
"DocInfo": {
"4c58abf5": {
"name": "coucou",
"extension": "pdf",
"size": 8751,
"type": "facture",
"repository": "archive"
},
"8cd524d7a45de": {
"name": "gerard",
"extension": "xml",
"size": 48734,
"type": "compta",
},
"5486d684fe54a": {
"name": "splendide",
"extension": "tiff",
"type": "photos",
"METADATA_A": "jambon"
}
},
"Base": {
"BASE_A": {
"name": "BASE_A",
"description": "That base is truly outrageous, they are truly, truly outrageous",
"baseMetadata_1": "METADATA_A",
"baseMetadata_2": "METADATA_B",
"baseMetadata_3": "METADATA_C"
},
},
}
As you can see, the arrays in DocInfo and Base are different, data and keys.
What I want to do is being able to use my ng-repeat to create a <th> line with the key name (for instance, Extension, of METADATA_A), but only once, since ng-repeat may duplicate this information.
I'm also providing a JSFiddle, if it can help any of you to understand my goal.
Thanks for reading and/or answering, have a great day.
Question is not totally clear, but it seems like you want "(key, val) in object" syntax.
ng-repeat="(name, age) in {'adam':10, 'amalie':12}"

Getting an error with this JSON response

I keep getting the error: Uncaught SyntaxError: Unexpected token '
this is the full JSON response:
'app': {type: 'app', desc: 'Application'}, 'iso': {type: 'iso', desc: 'ISO Disk Image'}, 'fla': {type: 'fla', desc: 'Adobe Flash Document'}, 'dll': {type: 'dll', desc: 'Dynamic Link Library'}
I've tried putting brackets around the full response too, but that doesn't fix it. Am I doing JSON wrong? I've tried removing the parentheses but then it complains about characters. I'm trying to turn this response into a JavaScript Object, but it just doesn't want to do it!
A couple of problems there:
In JSON, keys must be in double quotes (so must strings). Single quotes aren't allowed, and quotes are required.
In JSON, the top level must always be an object or an array. You've quoted a series of property initializers, which must be inside an object.
Here's the valid version of that:
{
"app": {"type": "app", "desc": "Application"},
"iso": {"type": "iso", "desc": "ISO Disk Image"},
"fla": {"type": "fla", "desc": "Adobe Flash Document"},
"dll": {"type": "dll", "desc": "Dynamic Link Library"}
}
Changes:
Change all single quotes to double quotes.
Put double quotes around the keys (type, desc) that didn't have them.
Put the whole thing in {} so the top level is an object.
Here is your valid JSON String
{
"app": {
"type": "app",
"desc": "Application"
},
"iso": {
"type": "iso",
"desc": "ISODiskImage"
},
"fla": {
"type": "fla",
"desc": "AdobeFlashDocument"
},
"dll": {
"type": "dll",
"desc": "DynamicLinkLibrary"
}
}
You can always check for validity on http://jsonlint.com/
If you want to look for some valid JSON formats look here
I've just add double quotes everywhere, put {} around, and it works :
var objet = '{"app": {"type": "app", "desc": "Application"},"iso": {"type": "iso", "desc": "ISO Disk Image"},"fla": {"type":"fla", "desc": "Adobe Flash Document"},"dll": {"type": "dll", "desc": "Dynamic Link Library"}}';
console.log($.parseJSON(objet));
You can retrieve my test here
See json.org for the full JSON standard.
You'll see that there are two problems here:
JSON data is represented as an object ( {} ) or an array ( [] ). Therefore you need to wrap everything within one or the other, depending on what is appropriate for your data (likely object, from the looks of your data).
You also need to use double-quotation marks on your strings. From json.org:
A string is a sequence of zero or more Unicode characters, wrapped in
double quotes, using backslash escapes
Finally, you can use JSON Lint to catch these sorts of problems quickly and easily.
Here's your data in valid JSON:
{
"app": {
"type": "app",
"desc": "Application"
},
"iso": {
"type": "iso",
"desc": "ISODiskImage"
},
"fla": {
"type": "fla",
"desc": "AdobeFlashDocument"
},
"dll": {
"type": "dll",
"desc": "DynamicLinkLibrary"
}
}

Categories