Creating key,value pair dynamically with angularjs and passing the same to java Map

Question

I have two empty text boxes in front end one for key and another for value one add button and a submit button.User can click on the add button to add one more pair of two text boxes each representing key and value respectively.

User is free to add any text as key and any text as value in the text boxes. The submit button is to submit the final form. I want to get these data in angularJS and further pass this to java Map through a post request.

To be specific a Map in java looks like this when converted to Json.

{"A":"something","B":"something","C":"something","D":"value"}

But I am not able to create such structure dynamically from front end using angularJS.

Why not? what is happening?

RafaelTSCS
– RafaelTSCS

2016-04-25 12:33:28 +00:00
Commented Apr 25, 2016 at 12:33 — RafaelTSCS
– RafaelTSCS, Commented Apr 25, 2016 at 12:33

Dushyant Bangal · Accepted Answer · 2016-04-25 12:36:27Z

5

As you need to map the key and value, I wont recommend array. I think this is what you need:

$scope.map={};
//  Add header data
$scope.addToMap=function()
{
    $scope.map[$scope.key]=$scope.value;
    $scope.key="";    //clear the textbox
    $scope.value="";  //clear the textbox
};

execute addToMap() when your button is clicked. You can also have an ng-repeat with non-editable text boxes, and run the ng-repeat on map

answered Apr 25, 2016 at 12:36

Dushyant Bangal

6,40310 gold badges53 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amit Over a year ago

This is the exact solution I was looking for.Thanks a lot Dushyant. I do not have the permission to vote this answer up. I wish if someone can vote this answer up for me.

Dushyant Bangal Over a year ago

@Amit, you can select it as the answer by clicking on the tick mark on the left side. You will eventually gain reputation and will be allowed to vote up. :)

Sachin K · Accepted Answer · 2016-04-25 12:40:24Z

1

Try following code to create dynamic JSON object.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
	$scope.jsonObject = {};
  
  $scope.add = function(){
  	$scope.jsonObject[$scope.key] = $scope.value;
  };
  
  $scope.submitForm = function(){
  	console.log($scope.jsonObject);     
  }
}]);

<div ng-controller="MyCtrl">
  <form>  
     Key: <input ng-model="key">
     Value: <input ng-model="value">
     <button ng-click="add()">ADD</button>
     <button ng-click="submitForm()">submit form</button>
   </form>
  
  <span>{{jsonObject}}</span>
</div>

answered Apr 25, 2016 at 12:40

Sachin K

1925 bronze badges

1 Comment

Amit Over a year ago

Thanks Sachin for the answer , this worked for me .It is quite similar to Dushyant's solution.

Devidas Kadam · Accepted Answer · 2016-04-25 12:39:12Z

0

try this here is the working fiddle

<div ng-controller="MyCtrl">
<div ng-repeat="item in items">
 <input type="text" ng-model="item">
 </div>
  <button ng-click="addItem()">Add</button>
  </div>

Controller

var myApp = angular.module('myApp',[]);
 myApp.controller('MyCtrl',function($scope){
  $scope.items=['item1','item2','item3','item4','item5'];

  $scope.addItem = function(){
    $scope.items.push('');
  }
})

answered Apr 25, 2016 at 12:39

Devidas Kadam

9549 silver badges19 bronze badges

1 Comment

Amit Over a year ago

This is adding only one TextBox. I need two for each row and also both of them are supposed to be connected with key value pair relationship.

pgksunilkumar · Accepted Answer · 2017-08-12 06:35:25Z

0

Check this Plunker http://plnkr.co/edit/sgKYtxFGL1JyrVFMkQM4?p=info

$scope.name = {"A":"something","B":"something","C":"something","D":"value"};

$scope.example = $scope.name["A"];

answered Aug 12, 2017 at 6:35

pgksunilkumar

3962 silver badges6 bronze badges

Collectives™ on Stack Overflow

Creating key,value pair dynamically with angularjs and passing the same to java Map

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related