We Keep Coding

How to create following type of json that will usefull in type ahead with angular js

I have successfully implement type ahead using angular js using this codepen.
Now my data is dynamic so I want to create my own json that should looks something like following:
$scope.states = [
{
name: "ABCD",
id: "AB"
},
{
name: "XYZ",
id: "XY"
},
{
name: "OPQR",
id: "OP"
},
{
name: "LMNO",
id: "LM"
},
{
name: "KLM",
id: "KL"
}
];
How to create like above json and store in $scope variable so I can access it using name and id separately.
Please help me...!!

I am giving by my own now cause I got it little bit late.
Solution is I have pushed the data wrong I have solved it like:
$scope.states.push({
name: "string",
id: int,
});
and I got it.

Dynamically create tree/nested JSON in JS

I'm planning to use Bootstrap Treeview where the Json is expected as below.
I need to dynamically add element to the "tree" based on respective input nodes
var tree = {};
tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1",
nodes : [
{
text : "GrandChild 3"
}
]
},
{
text: "Grandchild 2",
nodes : [
{
text : "GrandChild 4"
}
]
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
I've tried array.reduce() but couldn't make that work.
Looking for some approach

Manually, you could do this:
alert(tree[0].nodes[0].nodes[0].nodes[0].text);// alerts "GrandChild 3"
// add a node array:
tree[0].nodes[0].nodes[0].nodes[0].nodes = [{
text: "GrandChild NEW First"
}];
console.dir(tree);
Shows:
Array[5]0: Object nodes: Array[2]0: Object nodes: Array[2]0: Object nodes: Array[1]0: Object nodes: Array[1]0: Object text: "GrandChild NEW First" _proto__: Object length: 1__proto__: Array[0]text: "GrandChild 3" _proto__: Object length: 1
Do same to array 1:
Array[5]
1: Object
nodes : Array[1]
text : "Parent 2"
tree[1].nodes = [{
text: "GrandChild NEW Second"
}];
Now you just need code to determine the depth of nodes and what to add (node or text or both) at that point.
EDIT If it makes it clearer, the last addition can also be done thus:
Add a new node array, then push a value into that
tree[1].nodes = [];
tree[1].nodes.push({
text: "GrandChild NEW Second"
});

Edit 2 Link to Plunkr
Because of the nature of the snippet editor, the code below will not work on the snippet editor, but in order to ensure that the code does not magically vanish from plunkr, I've included it below. All you need to do is include jquery, bootstrap's css file, the treeview css, and treeview js file.
Some Issues
This may just be because I have never used treeview before in my life, but if you have opened up anything on the treeview or selected something, by adding in the new element you erase any of that action. Going through it quickly I didn't see a way to simply rebuild the node list (our tree variable) from the current states. I attempted to pass a pre-defined nodeId to see if we could make the changes directly onto the parent tree variable by using the get[State] commands but the id seems to be generated by the rendering aspect and is not carried over. (to clarify: I gave parent 1 a node id of 1, but when I called a couple of calls on it, I got that it's node id was 0)
The id convention seems to start at the first element (nodeId=0). It first then goes through the children (if any) of that node, incrementing the nodeId as it goes. Theoretically it would be a simple enough script to go back and enumerate the nodeId's manually so that you can make state changes so that the re-render looks the same as before, minus a newly appended node somewhere.
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1",
nodes: [{
text: "GrandChild 3"
}]
}, {
text: "Grandchild 2",
nodes: [{
text: "GrandChild 4"
}]
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
$(document).ready(function() {
$('#test').treeview({
data: tree
});
$('button.btn-primary').on('click', function() {
tree.push({
text: 'Parent ' + (tree.length + 1)
});
$('#test').treeview({
data: tree
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<button class="btn btn-primary">Add Something</button>
<div id="test"></div>
Edit 1
After reading through the OP's question, I'm not 100% that the code below answers what they were looking for. I've asked for further clarification and will keep this answer here until I know more.
Original
I've got some code working on a code pen Here, but I will add it to the snippet editor.
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1",
nodes: [{
text: "GrandChild 3"
}]
}, {
text: "Grandchild 2",
nodes: [{
text: "GrandChild 4"
}]
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
function recursive_tree(data, tag, child_wrapper, level) {
var html = [];
//return html array;
level = level || 0;
child_wrapper = (child_wrapper != false) ? child_wrapper : 'ul';
$.each(data, function(i, obj) {
var el = $('<' + tag + '>');
el.html(obj.text);
if (obj.hasOwnProperty('nodes')) {
var wrapper = $('<' + child_wrapper + '>');
var els = recursive_tree(obj.nodes, tag, child_wrapper);
wrapper.append(els);
wrapper.appendTo(el);
}
html.push(el);
});
return html;
}
$(document).ready(function() {
var html = recursive_tree(tree, 'li', 'ul');
console.log(html);
$('#parent').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="parent"></ul>
What you're looking for is something called Recursion, and it's used a lot for things exactly like this. There tends to be a nested/self similar structure.
This should be enough for a basic idea of what to do, from here it's really change the html that gets created. I've never used Bootstrap Treeview, so I have no idea how it is setup HTML wise, otherwise I'd have this be a bit more exact.

Binding and relationships in OpenUI5

Currently, I am trying to build an interface in OpenUI5, which is supposed to allow managing relationships. The whole application connects to the backend via oData.
Consider the following example: Two entities, "Group" and "Person". Each Group may consist of a number of Persons ("members"). What I'd like to do is to list all the Groups in a table - and for each groups members, I'd like to present a MultiComboBox to select the Persons associated with the group, like so:
Setting up the views is easy, but I have some trouble regarding the bindings. Binding a collection (like "Groups") to a table and binding properties (like "name") to an item is no problem of course, but I have no clue how to bind a collection - which is a child of another collection - to a nested list so to speak.
I don't even know if it is possible at all, especially since I want not only the Persons currently affiliated with a group to show up in the combo box, but all others as well to be able to select them. And of course, I want changes made in the interface to apply to the model as well...
Any hint towards a way to achieve the described functionality is much appreciated!

Two different models are binded to the Table..
YOu can have Groups and Members as entities with navigation property as members
you can play around here
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Mobile App in 23 Seconds Example</title>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"></script>
<!-- only load the mobile lib "sap.m" and the Blue Crystal theme -->
<script type="text/javascript">
var sampleData = {
"Groups": [
{
"GroupId": "D1",
"GroupName": "Developers",
"Members": []
},
{
"GroupId": "D2",
"GroupName": "GreenDay",
"Members": []
},
{
"GroupId": "D3",
"GroupName": "BackStreet Boys",
"Members": []
},
{
"GroupId": "D4",
"GroupName": "Managers",
"Members": []
}
]
};
var oModel = new sap.ui.model.json.JSONModel(sampleData);
var aData = [
{
key: "A",
text: "John"
},
{
key: "B",
text: "Sachin"
},
{
key: "C",
text: "Dravid"
},
{
key: "D",
text: "David"
},
{
key: "E",
text: "Sunil"
},
{
key: "F",
text: "Ronald"
},
{
key: "G",
text: "Albert"
}
];
var oMulti = new sap.m.MultiComboBox({
selectionChange: function (oEvent) {
//change your group data?
}
});
oMulti.setModel(new sap.ui.model.json.JSONModel(aData));
var oTemplate = new sap.ui.core.Item({
key: "{key}",
text: "{text}",
customData: new sap.ui.core.CustomData({
key: "{GroupId}",
value: "{GroupName}"
})
});
oMulti.bindItems("/", oTemplate);
//Build Table
var oTable = new sap.m.Table({
columns: [
new sap.m.Column({
width: "150px",
header: new sap.m.Label({
text: "Group Name"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Members"
})
})
]
}).placeAt("content");
var oTemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Label({
text: "{GroupName}"
}),
oMulti
],
press: function (oEvent) {
alert(oEvent.getSource().getBindingContext());
}
});
oTable.setModel(oModel);
oTable.bindItems("/Groups", oTemplate);
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>

bind an object by ref to fancytree source, is possible?

i want to bind an object to the fancytree source by reference, so that when i change any property in that object will suddenly reflect on the tree
var data = [
{title: "Node 1", key: "1"},
];
$("#tree").fancytree({
autoCollapse: true,
autoScroll: true,
checkbox: true,
selectMode: 3,
source: data
});
is this possible with fanytree ?
i tried with this code(given below) but fail
data = [{title: "Node 10", key: "1"}];
($("#tree").fancytree("getTree")).reload().done(function(){
alert("reloaded");
});

did you try this:
data = [{title: "Node 10", key: "1"}];
($("#tree").fancytree("getTree")).reload(data).done(function(){
alert("reloaded");
});
I.e. pass the new data to reload()?

GetOrgChart: Nodes whose parent haven't been defined

I'm using the GetOrgChart JQuery plugin and running into a JavaScript error of:
Uncaught Type Error: Cannot read property '_ap' of null
I was able to determine that this is occurring in the case from my dataset where a user occurs earlier in the list than their manager does. My hierarchy is based around NTLogins, so the NTLogin of a given user is the id and the parentId is their manager's NTLogin.
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: "bobeans125",
parentId: null,
Name: "Bob Beans"
}, {
id: "franklin884",
parentId: "tdawl756",
Name: "Frank Lin"
}, {
id: "tdawl756",
parentId: "bobeans125",
Name: "Tim Dawl"
}]
});
JSFIDDLE Demo
I have no good way that I can think of to order the data so that this doesn't occur other than finding all of the many root nodes and drilling down into the hierarchy manually so that the dataset being sent to GetOrgChart is ordered. However, the assumption of not having to do so was the primary driver for choosing GetOrgChart.

I ended up just recursively walking the tree and building the object in the right order. I was able to get it to load without error, however, the tree is too large to be displayed and requires being zoomed out too far to be useful.

Id : and ParentId: is integer value but you gave string value so your output is Error: Cannot read property '_ap' of null.
Correct Example:
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: 1,
parentId: null,
Name: "Bob Beans"
}, {
id: 2,
parentId: 1,
Name: "Frank Lin"
}, {
id: "3",
parentId: "1",
Name: "Tim Dawl"
}]
});