We Keep Coding

Angular Populate dropdown options dynamically while selecting dropdown in runtime

I have a JSON object containing names of dropdown and looks something like this -
$scope.obj = {
"dp1" :{},
"dp2" :{}
}
Objects dp1 and dp2 correspond to respective dropdowns. These objects will be referred by dropdown to populate their options tag.
Next I have a REST call function like this -
$scope.getData = function(category, type) {
var params = { "dp1" : category, "dp1__type": type};
PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamSerializer(params)).then(function(response) {
$scope.obj.dp1= response;
});
}
I am able to assign the response to $scope.obj.dp1 The reponse object looks like this-
{ "id" : 1, "name" : "john" }
Finally, my dropdown looks like this -
<select id="d1" ng-model="d1">
    <option ng-repeat="opt in obj.dp1" t>{{opt.id}}_{{opt.name}}</option>
</select>
I want to populate the obj JSON object based on response, which I able to. Then I want to go to sub object in obj and apply ng-repeat on that to populate the options tag.
Current implementation of ng-repeat gives me undefined undefined .

try this-
$scope.obj = {
"dropdown1" :{id:"dp2", data:"", options:[]},
"dropdown2":{id:"dp1", data:"", options:[]}
}
$scope.getData = function(category, type){
var params = { "dp1" : category, "dp1__type": type};
PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamSerializer(params)).then(function(response){
$scope.obj.dropdown1.options = response;
});
}
html page -
<div ng-repeat="dropdown in obj">
<select id="{{dropdown.id}}" ng-model="dropdown.data" ng-options="option.name for option in dropdown.options">
</div>

Jstree Container is empty

My Div
<div id="container">
The Jstree Configuration
$('#container').jstree({
'core' : {
'plugins': ["wholerow", "checkbox"],
'data' : {
"url" :apex.server.url ({p_request: "APPLICATION_PROCESS=GET_NODE_DATAA",x01: 0 || 0,x02: "LOADA" }),
"dataType" : "json", // needed only if you do not supply JSON headers
"dataFilter" : function (new_data) {
return new_data ;
}
}
}
});
Data Comming for the Server after run the jstree configuration and the new_data output
[{"data":{"title":"Form Modules(15)","attr":{"href":"#"},"icon":"form"},"attr":{"id":"1149043"},"state":"closed"},{"data":{"title":"PL/SQL Libraries(16)","attr":{"href":"#"},"icon":"pll"},"attr":{"id":"1149044"},"state":"closed"},{"data":{"title":"Menu Modules(2)","attr":{"href":"#"},"icon":"menu"},"attr":{"id":"1149045"},"state":"closed"},{"data":{"title":"Object Libraries(5)","attr":{"href":"#"},"icon":"olb"},"attr":{"id":"1149046"},"state":"closed"},{"data":{"title":"Report Modules(12)","attr":{"href":"#"},"icon":"onrptprop"},"attr":{"id":"1149047"},"state":"closed"},{"data":{"title":"APEX Applications(5)","attr":{"href":"#"},"icon":"apex"},"attr":{"id":"1149048"},"state":"closed"},{"data":{"title":"Database Objects(1701)","attr":{"href":"#"},"icon":"database"},"attr":{"id":"1149049"},"state":"closed"},{"data":{"title":"ASCII FILES(11)","attr":{"href":"#"},"icon":"ascii"},"attr":{"id":"1149061"},"state":"closed"}]
But the jstree show like in the screeshot
screeshot. But it dont display Data

I know that my answer isn't a conventionnal way to use Json, but if you can return an html string server-side, you can use jsTree with HTML feed methode : it works with <ul> and <li> where <ul> il a node. I'm sure that you need your IDs to do something afterward, but then try to use data arttributein your HTML string to get it

How to handle JSON data using AngularJS?

Currently I have a json file that populates information to my chart. An example of this chart can be found here: http://marmelab.com/ArchitectureTree/. I also have a panel to the right which is meant to display the information of one of the charts node's when clicked. However I don't know how to do this.
Say if I had in my json array:
{
"name": "Blogs",
"url": "blogs.my-media-website.com/*",
"dependsOn": ["Wordpress MU"],
"technos": ["PHP", "Wordpress"],
"host": { "Amazon": ["?"] }
},
I would click on 'Blogs' in the chart and the 'url', 'dependsOn' etc would then be displayed in the panel. I'm sure this function uses AngularJS to do this. Can someone point me in the right direction on how to do this?

On click of Blogs call below function :
In your controller, try adding this function.
$scope.onClickOfBlogs = function(){
$http.get('Your_JSON_file_Path_here').success(function(response){
$scope.jsonObject= response;
}).error(function() {
console.log('error occured while getting JSON file');
});
};
in your Panel HTML : -
<div id ="info">
<span>URL : {{jsonObject.url}} </span>
<span>Name : {{jsonObject.name}} </span>
<ul>
Depends on :
<li ng-repeat = "depends in jsonObject.dependsOn"> <!-- to iterate on array you need ng-repeat -->
{{depends}}
</li>
</ul>
</div>
you will get the data from json file into your html panel.Hope this helps.
**
** : http://plnkr.co/edit/dbJ0bhHhvASffJU9liY6?p=preview

Saving table data to HTML5 LocalStorage

I've created a JSFiddle Here
What I'm trying to do is save table data from the following code:
$('#save').click(function () {
$("#dataTable").find('tbody')
.append($('<tr>')
.append($('<td>')
.text($('#fname').val()))
.append($('<td>')
.text($('#lName').val()))
.append($('<td>')
.text($('#mId').val()))
);
$('#fname').val('');
$('#lName').val('');
$('#mId').val('');
})
I would like to save the <tr> data, but I'm having trouble finding where to start on parsing that into a savable format.

I have written little bit code to help you.
First create a class for the record which you want to store in grid
function MemberInfo(fName,lName,memberId){
this.FirstName=fname;
this.LastName=lName;
this.MemberId=memberId;
}
the create a function which will loop through all the tr and tds to populate that array, and finally save the JSON data in localStorage
var arr=[];
$("#dataTable").find('tbody tr').each(function(index,item){
var fName=$(item).find('td').eq(0).text();
var lName=$(item).find('td').eq(1).text();
var memberId=$(item).find('td').eq(2).text();
arr.push(new MemberInfo(fName,lName,memberId))
});
localStorage.setItem("memberData",arr);
Fiddle

Maybe you can save it as a JSON string
var data = {
name : $('#fname').val(),
lastname : $('#lName').val(),
memberId : $('#mId').val()
};
localStorage.setItem('member-data', JSON.stringify(data))
then later:
var data = JSON.parse(localStorage.getItem('member-data') || {})
$('#fname').val(data.name);
$('#lName').val(data.lastName);
$('#mId').val(data.memberId);

Replicate data into JQGrid

I am creating a jqgrid i m creating a row with 2 columns with dropdown box. The dropdowns are getting populated using ajax call. My requirement is I want to replicate this row on click on ADD button in UI. For example for now one row is coming into jqgrid, after clicking ADD button a new row with same content with out refreshing the changed value in first row should be displayed. Is there any way to do that? My jqgrid code is
$("#tbl").jqGrid('GridUnload');
$("#tbl").jqGrid(
{
url : "/searchCriteria.do",
datatype : 'json',
colModel :
[
{name : "test1",label : "TEST1", search : false,cellEdit:true, editable: true,edittype:"select",width:150 ,formatter: createDropDown,title:false},
{name : "test2",label : "TEST2", search : false,cellEdit:true, editable: true,edittype:"select",width:150 ,formatter: createDropDown,title:false}
],
viewrecords: true,
loadonce:true,
width: 1000,
multiselect : true
});
});

You can use a combination of the getLocalRow and addRowData methods to achieve your functionality. Docs for these methods.
Let's say in your HTML you have a button:
<button id="add" type="button">ADD</button>
In your javascript you could have:
<script>
$("#add").click(function(){
var id_of_new_row = something; //you haven't specified which are the exact rows you'd like selected.
//you could use the getDataIDs method to get the row-IDs you're looking for
var new_row_data = $("#gridId").jqGrid('getLocalRow', id_of_new_row));
$("#gridId").jqGrid('addRowData',id_of_new_row+1, new_row_data, "last");
});
</script>