jQuery Wijmo, treeview with attributes from json - javascript

I want to generate a treeview from a json, but I need to fill. “attr or .date” in the nodes of treeview
how to do?
data = [{
"text": "Item 1",
"attr": {
"id": 12145646541 "class": "folder"
}
}, {
"text": "Item 2",
"nodes": [{
"text": "Item 2.1"
}, {
"text": "Item 2.2"
}, {
"text": "Item 2.3"
}]
}, {
"text": "Item 3"
}, {
"text": "Item 4"
}]
$("#ul_menu").wijtree({
nodes: data
});
<ul id="ul_menu"></ul>

Kindly take a look at this blog article which explains about binding a wijtree to an external datasource as an json object:
http://wijmo.com/populate-wijtree-from-external-data-source-using-knockout/

Related

React Native - sort array based off values in common

Hey guys I have the following array that's used to display a flatlist within my app.
Array [
Object {
"data": "Item 1",
"id": "1",
"subjects": "1,8,9,23,11,15,16,14,20",
},
Object {
"data": "Item 2",
"id": "2",
"subjects": "8,11,2,4,16,19",
},
Object {
"data": "Item 3",
"id": "3",
"subjects": "16,20,14,11,9,2",
},
Object {
"data": "Item 4",
"id": "4",
"subjects": "1,16,19",
},
]
However I would like to sort this array based off the subjects value. In the app the user can select a couple of subjects which are represented by numbers so lets say the users selected subjects are:
11, 4, 2, 1
I would like to sort the array so that the items with 3 or more subjects in common with the user are sorted to the top and then items with two and then 1 and then none so the array above should look like this after sorting:
Array [
Object {
"data": "Item 2",
"id": "2",
"subjects": "8,11,2,4,16,19",
},
Object {
"data": "Item 1",
"id": "1",
"subjects": "1,8,9,23,11,15,16,14,20",
},
Object {
"data": "Item 3",
"id": "3",
"subjects": "16,20,14,11,9,2",
},
Object {
"data": "Item 4",
"id": "4",
"subjects": "0,16,19",
},
]
How can I achieve this?
I have been searching around the array sort function:
Array.prototype.sort()
However I have only seen how to sort based off number comparisons I have never seen an array sorted based off values in common. Please could someone help me with this!
EDIT
Array [
Object {
"data": "Item 2",
"id": "2",
"subjects": "8,11,2,4,16,19",
"ranking": "green",
},
Object {
"data": "Item 1",
"id": "1",
"subjects": "1,8,9,23,11,15,16,14,20",
"ranking": "amber",
},
Object {
"data": "Item 3",
"id": "3",
"subjects": "16,20,14,11,9,2",
"ranking": "amber",
},
Object {
"data": "Item 4",
"id": "4",
"subjects": "0,16,19",
"ranking": "red",
},
]
You could create an object with counts of selected subjects and sort descending by this value.
const
data = [{ data: "Item 1", id: "1", subjects: "1,8,9,23,11,15,16,14,20" }, { data: "Item 2", id: "2", subjects: "8,11,2,4,16,19" }, { data: "Item 3", id: "3", subjects: "16,20,14,11,9,2" }, { data: "Item 4", id: "4", subjects: "1,16,19" }],
selected = [11, 4, 2, 1],
counts = data.reduce((r, { id, subjects }) => {
r[id] = subjects
.split(',')
.reduce((s, v) => s + selected.includes(+v), 0);
return r;
}, {});
data.sort((a, b) => counts[b.id] - counts[a.id]);
console.log(data);
console.log(counts);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Restructuring JSON in JavaScript

I have this JSON which I'm parsing using NodeJS and it needs to be restructured into the second JSON which I've added below.
In the first JSON, the rows object has two pages objects (any number of pages objects can be present) which contains all the same keys and values with the exception of values and display keys.
{
"pages": [
{
"label": "SomeLabel",
"name": "Some",
"sections": [
{
"type": "Repeat",
"label": "Label 1",
"name": "Name 1",
"rows": [
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value A"
],
"valuesMetadata": [
{
"display": "Display A",
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
},
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value B"
],
"valuesMetadata": [
{
"display": "Display B",
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
}
],
"footer": null
}
]
}
]
}
In the second JSON the rows object has a single pages object, inside of which the values and display keys have multiple values (the non-common values).
{
"pages": [
{
"label": "SomeLabel",
"name": "Some",
"sections": [
{
"type": "Repeat",
"label": "Label 1",
"name": "Name 1",
"rows": [
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value A",
"Value B"
],
"valuesMetadata": [
{
"display": [
"Display A",
"Display B"
],
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
}
],
"footer": null
}
]
}
]
}
So, I want to know the fast and easy steps to do this. Please let me know the process and methods to solve this.
Thanks
If I understand you correctly, you want to combine all pages in a single page that holds all information.
This can be achieved using the Array.reduce function. reduce takes an array and combines all elements to a single value using a function (provided by you) to combine the first two elements until only one is left (i.e. 1 * 2 => new1; new1 * 3 => new2 where * represents your function).
Your problem would look something like this:
rows[0].pages = rows[0].pages.reduce((currentElement, currentState) => {
if (!currentState) { // first iteration return first element but make sure display is an array
currentElement.sections[0].answers[0].valuesMetadata[0].display =
[currentElement.sections[0].answers[0].valuesMetadata[0].display];
return currentElement;
}
// add values of current element to arrays in current state
currentState.sections[0].answers[0].values
.concat(currentElement.sections[0].answers[0].values);
currentState.sections[0].answers[0].valuesMetadata[0].display
.concat(currentElement.sections[0].answers[0].valuesMetadata[0].display);
return currentState;
});
currentElement is the object of the array that is currently reduced, currentState is the intermediate result of the reduction.
PS:
The object looks like you are way too many arrays where you would not need them. The given code snippet works only for the first element in each array (hence the [0]s. If you really do have multiple values in each array you would have to iterate over all of those accordingly.

Tag H1 is not working properly when dynamically generated

$scope.html = [{
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 1",
"colValue": "col-xs-12"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}, {
"tag": {
"name": "h1",
"text": "Titulo 2",
"colValue": "col-xs-12"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-8"
}
}]
}, {
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 3",
"colValue": ""
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}]
}];
I having some issues creating a dynamically form using javascript (angular) and bootstrap. The idea is to create dynamically the html tags.
My issue: h1 is not rendering properly when h1 > 1, it's not jumping to next line.
First take a look here: http://jsfiddle.net/92z54z04/951/
It needs to be like this way:
Add class=col-xs-12 to the inner ng-repeat:
<div class="col-xs-12" ng-repeat="(i, t) in h.data">
http://jsfiddle.net/92z54z04/957/

Passing array inside script tag in jquery template

I'm trying to pass an array in the below script, but it it not taking as an array. Below is the structure of the hash, that is passed to the jquery-template. options is the array I'm trying to pass
{
"options": [
[
"category 1",
"category 1",
[
[
"subcategory 1",
"subcategory 1",
[
[
"item 1",
"item 1"
],
[
"item 2",
"item 2"
]
]
],
[
"subcategory 2",
"subcategory 2",
[
[
"item 1",
"item 1"
],
[
"item 2",
"item 2"
]
]
]
]
]
]
}
I have this code of jquery-template that I'm rendering, when I pass options to the data_tree below, it doesn't take it as an array, instead takes it as non string, which throws error.
<script id="nestedFieldTemplate" type="text/x-jquery-tmpl">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#div_ff').nested_select_tag({
initValues: {
"subcategory_val":null,
"item_val":null,
"category_val":null
},
default_option: "<option value='-1'>...</option>",
data_tree: ${options},
});
});
{{html "</sc"+"ript>"}}
</script>
I tried passing it as a normal javascript variable too, but no luck. I would to pass a jquery-template variable as an array in the code below.
Below is the how it is generating the script.
jQuery(document).ready(function(){
jQuery('#div_ff_ffs_02').nested_select_tag({
initValues: {
"subcategory_val":null,
"item_val":null,
"category_val":null
},
default_option: "<option _tmplitem="14" value='-1'>...</option>",
data_tree: category 1,category 1,subcategory 1,subcategory 1,item 1,item 1,item 2,item 2,subcategory 2,subcategory 2,item 1,item 1,item 2,item 2,subcategory 3,subcategory 3,,category 2,category 2,subcategory 1,subcategory 1,item 1,item 1,item 2,item 2,
});
});
By pasting your code into Notepad++, I found an extra brace in the array. Try this:
{
"options":
[
[
"category 1",
"category 1",
[
[
"subcategory 1",
"subcategory 1",
[
[
"item 1",
"item 1"
],
[
"item 2",
"item 2"
]
]
],
[
"subcategory 2",
"subcategory 2",
[
[
"item 1",
"item 1"
],
[
"item 2",
"item 2"
]
]
]
]
]
]
}
Exercise good indentation practices and this problem will occur a lot less.

jQuery.Dunatree.How to load JSON tree using AJAX?

I'm using jQuery.dynatree plugin, how to load JSON formatted data using AJAX?
I do all as said in documentation:
<script>
$(function() {
$( "#Tree" ).dynatree({
title:"Thetree",
imagePath:'/jquery/css/',
selectMode:1,
initAjax:{
url:"http://127.0.0.1:2013/jsfolderstree"
}
});
});
</script>
The JS scripts is correctly connected to the HTML page, witout errors.
The requested URL by AJAX returns valid JSON:
[{
"key": "0x55638DB3",
"children": [
{
"key": "0x5D43E57C",
"children": [
{
"key": "0x70A4C1CE",
"children": [
{
"key": "0x799E9590",
"children": [],
"expand": true,
"tooltip": "This is group 5",
"isFolder": true,
"title": "Group 5"
},{
"key": "0x78C952A8",
"children": [],
"expand": true,
"tooltip": "This is group 6",
"isFolder": true,
"title": "Group 6"
}],
"expand": true,
"tooltip": "This is group 3",
"isFolder": true,
"title": "Group 3"
}],
"expand": true,
"tooltip": "This is group 1",
"isFolder": true,
"title": "Group 1"
},{
"key": "0x45B98999",
"children": [
{
"key": "0x6C829354",
"children": [],
"expand": true,
"tooltip": "This is group 4",
"isFolder": true,
"title": "Group 4"
}],
"expand": true,
"tooltip": "This is group 2",
"isFolder": true,
"title": "Group 2"
},{
"key": "0x47BE4570",
"children": [],
"expand": true,
"tooltip": "This is group 7",
"isFolder": true,
"title": "Group 7"
}],
"expand": true,
"tooltip": "Main level of tree",
"isFolder": true,
"title": "Root"
}]
But in result I have message "Loading Error" amd nothing more...
Where is my mistake?
I need load some JSON tree to the web-page, the tree must have methods to get selected node, and visual selection by mouse, that is that I need. Maybe need to use more simple plugins?
Thanks!
If you using jQuery ajax to load a JSON data,jQuery will resolve JSON data by JSON.parse method.
So don't put your JSON data in [], it will call parse error in jQuery ajax method.
{
"key": "0x55638DB3",
"children": [{...}]
....
}

Categories

Resources