We Keep Coding

AngularJs appending options to select box

I am new to AngularJs. I am having problem in appending options to select boxes created by javascript. Following is my code.
var inputElements = $('<div><label style="float:left;">' + i + '</label><select ng-model="object" class="form-control sel" style="width:300px; float:right; margin-right:75px;"> <option>select</option></select></div></br></br>');
var temp = $compile(inputElements)($scope);
$('#projOrder').append(temp);
$scope.object = object;
//for(var opt=0; opt<selOptLabels.length; opt++) {
$('.sel').append('<option ng-repeat="obj in object" value="'+
{{obj.value}}+'">'+{{obj.value}}+'</option>');
I am getting this error:- SyntaxError: invalid property id
Hi, I am posting json example. This is just a small part of json in my case.
"ProjectOrder": {
"Connect direct required": {
"value": "N",
"id": "STR_15523_62"
},
"Cores": {
"value": ".5",
"id": "NUM_15523_50"
},
"Permanent data in GB": {
"value": "100",
"id": "NUM_15523_56"
},
"Description": {
"value": "AZBNL azbngb",
"id": "STR_15523_2"
},
"Order Id": {
"value": "15523",
"id": "INT_15523_96"
},
"Project cost center": {
"value": "N",
"id": "STR_15523_66"
},
"Project debitor": {
"value": "N",
"id": "STR_15523_64"
},
"Project OE": {
"value": "N",
"id": "STR_15523_57"
},
"Project SITE": {
"value": "N",
"id": "STR_15523_59"
},
"Project Status": {
"value": "RFC",
"id": "STR_15523_54",
"dropdown": [
{
"value": "IW",
"label": "In Work"
},
{
"value": "RFC",
"label": "Ready for Creation"
},
{
"value": "CR",
"label": "Created"
},
{
"value": "FC",
"label": "Failed"
}
]
},
"Project Type (paas, miner)": {
"value": "paas",
"id": "STR_15523_37",
"dropdown": [
{
"value": "paas",
"label": "PaaS Project"
},
{
"value": "miner",
"label": "Miner Project"
}
]
},
"WORK data in GB": {
"value": "100",
"id": "NUM_15523_55"
}
}
Now I have to create input fields and dropdown menus(if there is a dropdown menu) with json data

You really should not be hand-constructing HTML like that. It's best if you use a template and let the template engine handle the heavy lifting.
I also noticed that you're using object as the ng-model. Instead you should have a separate variable which will hold the selected value.
Here's a better way of doing this--in an .html file:
<div ng-repeat="object in listOfObjects"
<label style="float: left">{{ $index }}</label>
<select ng-model="selectedValues[$index]" class="form-control sel"
style="width:300px; float:right; margin-right:75px;"
ng-options="obj.value for obj in object"></select>
</div>
Then in whatever controller you have set up in JavaScript:
// this will be the list of selected values
$scope.selectedValues = new Array(list.length);
// this would be the array that each `object` is part of
$scope.listOfObjects = list;
This isn't the most elegant solution, but basically what I've done is construct an array that is the same length as the list of objects. Angular templates have a special variable $index when you're in an ng-repeat which tracks the current index of the array you're looping through.
So when a user changes the selected value of the 3rd select box (index 2), $scope.selectedValues[2] would be set to the selected option.
EDIT: on transforming the JSON to an array:
var list = Object.keys(json).map(function(jsonKey) {
return {
name: jsonKey,
label: json[jsonKey].label,
value: json[jsonKey].value
};
});`

So.. there are a number of reasons why that won't work. The provided code wouldn't even work because of the template brackets that you are trying to append to your html string...
$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');
Is there a reason that you are trying build your markup in js?
It's also advised not to use jquery inside angular controllers. If you have jquery loaded the jQuery object is available through angular.element, otherwise angular uses jQuery light.
Rather than enumerate on the other issues here, I put together this basic example of how a select works in Angular
https://codepen.io/parallaxisjones/pen/BRKebV
Also, you should consult the angular documentation before posting questions to stack overflow. The docs provide a pretty clear example of how to use ng-repeat in a select. https://docs.angularjs.org/api/ng/directive/select
EDIT: I updated my codepen with an example of fetching JSON data with an HTTP GET request
EDIT: updated codepen with provided data example, iterating over object with (key, value) in json syntax in ng-repeat

Jstree select_node not working in ver > 3.0.0

I need to select a particular tree node during runtime (after assigning Json data) using $('#mytree').jstree(true).settings.core.data.
Here is my jquery code:
$('#mytree').jstree(true).settings.core.data = mytreedataJson;
$('#mytree').jstree(true).refresh();
$("#mytree").jstree("select_node", "1");
and also tried
$('#mytree').jstree(true).select_node("1");
$.jstree.reference('#mytree').select_node("1");
and here is my Json data:
var mytreedataJson = [{ "id": "1", "text": "Start Process", "parent": "#" }, { "id": "2", "text": "End Process", "parent": "#" }, { "id": "3", "text": "Next Process", "parent": "1" }];
Actually, this code works fine with the jstree version 3.0.0, but not with the greater versions.

You need to make sure your code works with async operations - refresh will not return immediately. You should probably use:
$('#mytree')
.one("refresh.jstree", function (e, data) {
data.instance.select_node("1");
}).jstree(true).refresh();

Dropdown in kendo UI grid

I need a drop down for a Kendo-UI grid, and came across this example:
http://codepen.io/jordanilchev/pen/cnkih?editors=001
But in this example, both the key and the display text for the drop down are included in the data source of the grid as well, which seems very redundant. I looked at a similar example on Telerik's site, and it was the same there.
Here is the data source for the Type drop-down:
var types = [
{
"Type": "FB",
"Name": "Facebook"
},
{
"Type": "TW",
"Name": "Twitter"
},
{
"Type": "YT",
"Name": "YouTube"
},
{
"Type": "PI",
"Name": "Pinterest"
}
];
So far so good. But here is the data for the actual grid - notice how it also contains both Type and Name for every record:
var products = [{
"ProductID": 1,
"ProductName": "Chai",
"Type": {
"Type": "FB",
"Name": "Facebook"
}
}, {
"ProductID": 2,
"ProductName": "Chang",
"Type": {
"Type": "FB",
"Name": "Facebook"
}
}...
What I had expected is that only the Type would have to be in the data source of the grid - like this:
var products = [{
"ProductID": 1,
"ProductName": "Chai",
"Type": "FB",
}, {
"ProductID": 2,
"ProductName": "Chang",
"Type": "FB",
}...
Is there a way to use a drop-down in the Kendo UI grid without having to include both the key and the display text for every record in the data source of the grid? In other words, the grid would know to reference the datasource of the drop-down to get the display text for the cell.
Update 9/23/2014:
The solution proposed by CodingWithSpike works fine when the datasource for the drop down is a hard-coded / local array, but I am having difficulties getting it to work when loading the data for the drop down from a server. The issue seems to be that the grid gets initialized before the data source for the drop down has been read.
To "simulate" an $http call to populate the data source, I use a setTimeout:
$(document).ready(function () {
var categories = [];
setTimeout(function() {
categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
}];
$('#grid').data('kendoGrid').dataSource.read(); // Just as a test, but not even this helps
$('#grid').data('kendoGrid').refresh(); // Just as a test, but not even this helps
}, 1000);
When the data is loaded as above (or via $http), the drop down fields now contain the value (id) instead of the text. Here is a plunker that shows this:
http://plnkr.co/edit/DWaaHGVAS6YuDcqTXPL8?p=preview
Note that the real app is an AngularJs app, and I would rather not use some jQuery hack to wait until the drop down data is available and then create the grid element.
How do I get this working with data from a server?

Take a look at the Kendo demo for "Foreign Key" columns. I think it is exactly what you want.
http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn
They use a list of categories:
var categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
},{
"value": 4,
"text": "Dairy Products"
},{
"value": 5,
"text": "Grains/Cereals"
},{
"value": 6,
"text": "Meat/Poultry"
},{
"value": 7,
"text": "Produce"
},{
"value": 8,
"text": "Seafood"
}];
The demo is a little deceiving because their data for the grid contains the entire "Category":
var products = [{
ProductID : 1,
ProductName : "Chai",
SupplierID : 1,
CategoryID : 1,
QuantityPerUnit : "10 boxes x 20 bags",
UnitPrice : 18.0000,
UnitsInStock : 39,
UnitsOnOrder : 0,
ReorderLevel : 10,
Discontinued : false,
Category : {
CategoryID : 1,
CategoryName : "Beverages",
Description : "Soft drinks, coffees, teas, beers, and ales"
}
}
However, if you look at the column definition:
{ field: "CategoryID", width: "200px", values: categories, title: "Category" },
The specified field is CategoryID not Category so the grid data item actually doesn't need to specify a "Category" property at all, and could just be:
var products = [{
ProductID : 1,
ProductName : "Chai",
SupplierID : 1,
CategoryID : 1, // <-- this is the important part!
QuantityPerUnit : "10 boxes x 20 bags",
UnitPrice : 18.0000,
UnitsInStock : 39,
UnitsOnOrder : 0,
ReorderLevel : 10,
Discontinued : false
}
I suspect the "Category" was in there just because this JSON file is shared by a few examples, so a different one may have needed it.
Update
Regarding the issue of the Grid loading before the "Category" (or whatever) FK table:
Use a deferred or the callback on the grid datasource to wait until the FK datasource is done loading before populating the grid data. Alternatively, you can init the grid, but set it to autoBind: false so that it doesn't actually read from its DataSource immediately.
Something like this (sorry for any errors, typing this off the top of my head):
(function () {
// for the foreign keys
var categoriesDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://somewhere.com/categories"
}
}
});
// for the actual grid data
var gridDataSource = new kendo.data.DataSource({
...
});
// init the grid widget
var gridWidget = $("#grid").kendoGrid({
dataSource: gridDataSource,
autoBind: false, // <-- don't read the DataSource. We will read it ourselves.
columns: [ ... ]
});
// now we can read the FK table data.
// when that completes, read the grid data.
categoriesDataSource.fetch(function () {
gridDataSource.fetch();
});
});

I asked Telerik about this, and here is the solution they gave.
When the drop-down's data is available, use setOptions on the grid, like this (again, I use setTimeout instead of an Ajax call here, for simplicity):
setTimeout(function() {
categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
}];
var grid = $('#grid').data('kendoGrid');
var cols = grid.columns;
cols[1].values = categories;
grid.setOptions({columns: cols});
$('#grid').data('kendoGrid').refresh();
}, 200);
Also, autoBind: false is not needed.
Here is an updated plunker:
http://plnkr.co/edit/ZjuK9wk3Zq80yA0LIIWg?p=preview

Handsontable Replace autocomplete values with key before posting

I am using HandsOnTable to make editing database tables more interactive on my site.
HandsOnTable fulfils nearly all my requirements except that some columns in my database actually store foreign keys rather than local string values.
In the UI I would like these columns to appear as dropdown menus where the user selects a readable value mapped to the previously mentioned foreign key (I.e. something like an HTML name/value select).
Unfortunately HandsOnTable does not have such a cell type. The closest thing to it is autocomplete. This allows me to create a dropdown, but it only contains values; no corresponding keys. Here is how it is created:
"source": ["Jebediah", "Bob", "Bill", "Buzz"]
So what I am planning is to send two Json strings from the server:
One containing the parameters needed by HandsOnTable to render the table:
{
"data": [
{ "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
{ "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
{ "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
{ "ID": 4, "Description": "Wood", "Volume": '513', "Customer": "Buzz" }
],
"columns": [
{ "data": "ID", "type": "numeric" },
{ "data": "Description", "type": "text"},
{ "data: "Volume", "type": "numeric" },
{ "data": "color", "type": "autocomplete", "strict": "true",
"source": ["Jebediah", "Bob", "Bill", "Buzz"]}
]
}
The second mapping keys to values
{
"mappings": [
{"key": 0, "value": "Jebediah"},
{"key": 0, "value": "Bob"},
{"key": 0, "value": "Bill"},
{"key": 0, "value": "Buzz"}
]
}
So far so good. Now for the tricky part:
HandsOnTable has a function (getData()) that allows me to retrieve the tables data as a Json string ready to be sent back to the server:
var jdata = myHandsOnTable.getData();
Where jdata would look something like this:
"data": [
{ "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
{ "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
{ "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
{ "ID": 4, "Description": "Wood", "Volume": '513', "Customer": "Buzz" }
]
Now before posting, I would like to replace that values for the Customer node with their matching pair key within the mappings json string.
How can I best achieve this in JavaScript/JQuery?
Is there a function that works something as follows?:
jdata.replaceNode('node', mappings)
Thanks

I had a similar issue and here's what I did...
For each foreign key column, I stored 2 values in handsontable; one for the id itself, which I set as a hidden column and the other is the user friendly readable text value as dropdowns.
Everytime the value of a dropdown is changed, I also change the corresponding hidden id. In my case I have a dropdown outside the handsontable as a filter which I use to map key/value pairs, but you could use Hashtables or anything else.
Now the code...
Handsontable config:
afterChange: function (changes, source) { AfterChange(changes, source); }
After change event (called everytime there is a change in the table):
function AfterChange(Changes, Source) {
if (Source === 'loadData') {
return; //don't save this change
}
var rowIndex = 0, columnID = 1, oldTextVal = 2, newTextVal = 3, ntv = '', nv = '';
$(Changes).each(function () {
if (this[columnID] === 'CategoryID') {
// Do nothing...
//To make sure nothing else happens when this column is set through below
}
else if (this[columnID] === 'CategoryName') {
ntv = this[newTextVal];
//This is where I do my mapping using a dropdown.
nv = $('#CategoriesFilterDropdown option').filter(function () { return $(this).text() === ntv; }).val();
//13 is my CategoryID column
$container.handsontable('setDataAtCell', this[rowIndex], 13, nv);
}
});
}
}
This way, you change the foreign keys as you and don't need to loop through it all before saving. It also makes it easy to send the table data as is back to server.
In summary,
The user interacts with CategoryName column (which is of type autocomplete).
The CatgoryID column is hidden to the user by setting the column width to 0 using the colWidths option of handsontable.
When the CategoryName field changes, use afterChange event to set the corresponding CategoryID column. In my case, I use a dropdown somewhere else on the page to map Name => ID, but you can use other means such as a hashtable.
I hope it makes sense...

How to split JSON into 2 arrays and before I pass it to getJSON for later manipulation?

I have a json data and i am trying to split it into 2 sets of data arrays One json data will hold all the values from "Construct" data values and the 2nd json data will hold the rest of the array and values for product,system etc etc.
I want to split it into 2 arrays before i pass it into getJSON . Once I split them into 2 then pass the restofJSONdata into getJSON vice versa
How can I split them into 2 arrays before i pass it to getJSON?
MY current code
<script type="text/javascript">
$(document).ready(function () // don't do anything until the document is loaded.
{
var baseUrl = "config.json";
console.log(baseUrl.html.splice(3)); // remove and log the empty fieldset
var constructgrp = baseUrl.html.shift(); // remove the first item (caption: "Construct")
var restofJSONdata = baseUrl.html;
alert(constructgrp);
$.getJSON(restofJSONdata, function (data) // call getJSON providing the complete url with search term and a JSONP callback
{
// console.log(data.html.splice(2,3));
// console.log("data " +data);
/*
console.log(data.html.splice(3,0)); // remove and log the empty fieldset
var constructgrp = data.html.shift(); // remove the first item (caption: "Construct")
var restofJSONdata = data.html;
alert(constructgrp); :*/
$("#demo-3-form").empty(); // clear out any previous results.
if (data.html.length < 1) $('#demo-3-forms').html("No results. Nada. Nuttin. Zippo.");
//$("#demo-3-form").empty(); // clear out any previous results.
// if (data.html.length < 1) $('#demo-3-forms').html("No results. Nada. Nuttin. Zippo.");
// $.each(this.constructgrp, function () // iterate over the results, constructing the HTML for the display.
// {
/*
var html =constructgrp.type +' :';
html += '<b>'+constructgrp.caption +'</b><br>';
html += ' <br>';
$.each(constructgrp.html, function() {
// alert(this.name);
html +='Title :' +this.title +'<br>';
html +='Name :' +this.name +'<br>';
html +='Value :' +this.value +'<br> ';
html +='Caption :' +this.caption +'<br><br> ';
// html += this.type +'<br><br> ';
});
$('#demo-3-form').hide().append(html).fadeIn(800); // fade in the results over 2 seconds.
*/
// });
$.each(restofJSONdata, function () // iterate over the results, constructing the HTML for the display.
{
var html =this.type +' :';
html += '<b>'+this.caption +'</b><br>';
html += ' <br>';
$.each(this.html, function() {
// alert(this.name);
html +='Title :' +this.title +'<br>';
html +='Name :' +this.name +'<br>';
html +='Value :' +this.value +'<br> ';
html +='Caption :' +this.caption +'<br><br> ';
// html += this.type +'<br><br> ';
});
$('#demo-3-form').hide().append(html).fadeIn(800); // fade in the results over 2 seconds.
});
});
//});
});
</script>
JSON code
config.json
{
"html": [{
"type": "fieldset",
"caption": "Construct",
"html": [{
"title": "tooltip data for rk",
"name": "rk_",
"value": "24",
"caption": "DNS Servers (a list of IP addresses separated by comas)",
"type": "textarea"
}, {
"title": "tooltip data for rk_ntpservers",
"name": "rk_ntpservers",
"value": "111.11.11.11",
"caption": " separated by comas",
"type": "textarea"
}, {
"title": "tooltip data for ff_eth0_ff",
"name": "ff_eth0_ff",
"value": "18",
"caption": "Public Address (0.0.0.0 to disable)",
"type": "text"
}, {
"title": "tooltip data for ff_eth0_netmask",
"name": "ff_eth0_netmask",
"value": "2.2.2.0",
"caption": "Public rk Netmask",
"type": "text"
}, {
"title": "tooltip data for ff_eth1_ff",
"name": "ff_eth1_ff",
"value": "0.0.0.0",
"caption": "MG Device rk (0.0.0.0 to disable)",
"type": "text"
}, {
"title": "tooltip data for ff_eth1_netmask",
"name": "ff_eth1_netmask",
"value": "2.2.2.0",
"caption": "MG Device rk Netmask",
"type": "text"
}, {
"title": "tooltip data for ff",
"name": "ff_gateway",
"value": "1",
"caption": "Gateway",
"type": "text"
}]
}, {
"type": "fieldset",
"caption": "Product",
"html": [{
"title": "tooltip data for product_ident",
"name": "product_ident",
"value": "78",
"caption": "Product Name",
"type": "text",
"disabled": "disabled"
}, {
"title": "tooltip data for product_svnversion",
"name": "product_svnversion",
"value": "7916",
"caption": "Revision",
"type": "text",
"disabled": "disabled"
}]
}, {
"type": "fieldset",
"caption": "System ",
"html": [{
"title": "tooltip data for system_license",
"name": "system_license",
"value": "HH",
"caption": "License",
"type": "text"
}, {
"title": "tooltip data for system_variant",
"name": "system_variant",
"value": "normal",
"caption": "Variant",
"type": "text"
}]
}, {
"type": "fieldset",
"class": "btn-fieldset",
"caption": "",
"html": [{
"type": "submit",
"id": "submitbtn",
"class": "btn btn-primary",
"value": "Save"
}]
}]
}

To split them into 2 arrays before pass it to getJSON you need to:
Get JSON
Split data into two pieces
var construct;
$.getJSON('PATH_TO_config.json', function(data) {
// splice will return first array and leaves rest in original data
construct = data.html.splice(0, 1);
// in the first parameter you have data.html[0] in the second
// data.html[1..3] from the original JSON
doSomethingWithData(construct, data.html);
}