Need to post multi dimensional JSON from Angularjs form

Question

i'm new in angular. i need multi dimensional type json. mycode is given below

view page controller

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

app.controller('MainCtrl', function($scope) {
	$scope.menu 	=	{};
        $scope.menus 	=	[
		{"menuID":"1","sub_menu":"N","name":"dashboard","sub_menus":""},
		{"menuID":"2","sub_menu":"Y","name":"settings","sub_menus":[{"sub_menuID":"1","name":"settings1","page":"Y","pages":[{"pageID":"1","name":"page1"},{"pageID":"2","name":"page2"}]},{"sub_menuID":"2","name":"settings2","page":"N","pages":""}]},
		{"menuID":"3","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"1","name":"help1","page":"N","pages":""},{"sub_menuID":"2","name":"help2","page":"N","pages":""}]},
		{"menuID":"4","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"1","name":"contact1","page":"N","pages":""},{"sub_menuID":"2","name":"contact2","page":"N","pages":""}]}
	];

	$scope.submit	=	function(){
		// alert(JSON.stringify($scope.menu));
		console.error(JSON.stringify($scope.menu));
	}
	
});


html view page

<!DOCTYPE html>
<html>
<head>
  <title>rules</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
  <script src="mainCtrl.js"></script>
</head>
<body ng-app="app">
  
 <div ng-controller="MainCtrl">
      <form ng-submit="submit()">
      <ul>
        <li ng-repeat="x in menus">
          <input type="checkbox" ng-model="menu[x.menuID]" ng-true-value="'{{x.menuID}}'">{{x.name}}
          <ul ng-if="[x.sub_menu] == 'Y'">
            <li ng-repeat="subMenu in x.sub_menus">
              <input type="checkbox" ng-model="menu[x.menuID][subMenu.sub_menuID]">{{subMenu.name}}
              <ul ng-if="[subMenu.page] == 'Y'">
                <li ng-repeat="page in subMenu.pages">
                  <input type="checkbox" ng-model="menu[x.name][subMenu.name][page.pageID]">{{page.name}}
                </li>
              </ul>
            </li> 
          </ul>
        </li>
      </ul>
      <button>Submit</button>
      </form>
  </div>
</body>
</html>

I need this format of JSON:

After all checkbox checked and post form.

Please add your sample JSON in as formatted text, not an image - it is much easier to read as text. — halfer
– halfer, Commented Apr 2, 2017 at 9:54
{ "1":"1", "2":{ "1":{ "1":"1", "2":"2" }, "2":"2", "3":"3", "4":"4" }, "3":{ "5":"5", "6":"6", "7":"7", "8":"8" }, "4":{ "9":"9", "10":"10" }, "5":"5", "6":"6", "7":"7", "8":"8", "9":"9", "10":"10" } — deep gagan
– deep gagan, Commented Apr 2, 2017 at 10:20
Array ( [1] => 1 [2] => Array ( [1] => Array ( [1] => 1 [2] => 2 ) [2] => 2 [3] => 3 [4] => 4 ) [3] => Array ( [5] => 5 [6] => 6 [7] => 7 [8] => 8 ) [4] => Array ( [9] => 9 [10] => 10 ) [5] => 5 [6] => 6 [7] => 7 [8] => 8 [9] => 9 [10] => 10 ) — deep gagan
– deep gagan, Commented Apr 2, 2017 at 10:20

Dhiraj · Accepted Answer · 2017-04-07 06:33:37Z

1

Example in snippet will create the object structure as per requirement if all check boxes selected. But it will change only value to false if user unchecked boxes(you can work upon this as per requirement in future).

Please see the below snippet for answer.

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

app.controller('MainCtrl', function($scope) {
  $scope.mainMenu = {};
  $scope.submenu = {};
  $scope.pagemenu ={};
	$scope.menu 	=	{};
        $scope.menus 	=	[
		{"menuID":"1","sub_menu":"N","name":"dashboard","sub_menus":""},
		{"menuID":"2","sub_menu":"Y","name":"settings","sub_menus":             [{"sub_menuID":"1","name":"settings1","page":"Y","pages":[{"pageID":"1","name":"page1"},{"pageID":"2","name":"page2"}]},{"sub_menuID":"2","name":"settings2","page":"N","pages":""}]},
		{"menuID":"3","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"1","name":"help1","page":"N","pages":""},{"sub_menuID":"2","name":"help2","page":"N","pages":""}]},
		{"menuID":"4","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"1","name":"contact1","page":"N","pages":""},{"sub_menuID":"2","name":"contact2","page":"N","pages":""}]}
	];
  
  $scope.assignValue = function(menuId,submenuId,pageId){
/*  if(!$scope.mainMenu[menuId]&&!$scope.submenu[menuId]&&!$scope.pagemenu[menuId]){
    delete($scope.mainMenu[menuId]);
    delete($scope.submenu[menuId]);
    delete($scope.pagemenu[menuId]);
  }*/

if(pageId!=undefined && !$scope.pagemenu[menuId][submenuId][pageId]){
    delete($scope.pagemenu[menuId][submenuId][pageId]);
    if(Object.keys($scope.pagemenu[menuId][submenuId]).length === 0){
       delete($scope.pagemenu[menuId][submenuId]);
  }
  }
  
  if(submenuId!=undefined && $scope.submenu[menuId][submenuId]!=undefined && !$scope.submenu[menuId][submenuId] && Object.keys($scope.submenu[menuId][submenuId]).length === 0){
    delete($scope.submenu[menuId][submenuId]);
   
  }

    if(Object.keys($scope.menu).length === 0){
        $scope.menu=Object.assign({},$scope.mainMenu,$scope.submenu);
    }else{
        $scope.menu[menuId] = $scope.mainMenu[menuId];
    }
  
    var tempObj = Object.assign({},$scope.submenu[menuId],$scope.pagemenu[menuId]);
    if(Object.keys(tempObj).length != 0){
        $scope.menu[menuId] = tempObj
    }
  
  
  console.log($scope.menu);
  }
  

	$scope.submit	=	function(){
		// alert(JSON.stringify($scope.menu));
		console.log(JSON.stringify($scope.menu));
    	console.log($scope.menu);
	}
	
});

<!DOCTYPE html>
<html>
<head>
  <title>rules</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
  <script src="mainCtrl.js"></script>
</head>
<body ng-app="app">
  
 <div ng-controller="MainCtrl">
      <form ng-submit="submit()">
      <ul>
        <li ng-repeat="x in menus">
          <input type="checkbox" ng-change= "assignValue(x.menuID)" ng-model="mainMenu[x.menuID]" ng-true-value="'{{x.menuID}}'">{{x.name}}
          <ul ng-if="[x.sub_menu] == 'Y'">
            <li ng-repeat="subMenu in x.sub_menus">
              <input type="checkbox" ng-model="submenu[x.menuID][subMenu.sub_menuID]" ng-true-value="'{{subMenu.sub_menuID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,null)">{{subMenu.name}}
              <ul ng-if="[subMenu.page] == 'Y'">
                <li ng-repeat="page in subMenu.pages">
                  <input type="checkbox" ng-model="pagemenu[x.menuID][subMenu.sub_menuID][page.pageID]"  ng-true-value="'{{page.pageID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,page.pageID)">{{page.name}}
                </li>
              </ul>
            </li> 
          </ul>
        </li>
      </ul>
      <button>Submit</button>
      </form>
  </div>
</body>
</html>

edited Apr 7, 2017 at 6:33

answered Apr 2, 2017 at 11:12

Dhiraj

1,48212 silver badges21 bronze badges

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

7 Comments

deep gagan Over a year ago

hello, Dhiraj it doesn't give proper value

Dhiraj Over a year ago

could you provide some steps for producing wrong value.?

deep gagan Over a year ago

when select menu and sub menu it gives:- { "1": "1", "2": { "1": "1", "2": "2" }, "3": { "1": "1", "2": "2" }, "4": { "1": "1", "2": "2" } }

deep gagan Over a year ago

when all box selected it gives :- { "1": "1", "2": { "1": { "1": "1", "2": "2" } }, "3": { "1": "1", "2": "2" }, "4": { "1": "1", "2": "2" } } here sub menu 2 missing

deep gagan Over a year ago

The checkbox which are already checked, if uncheck them then they give key and false value too.I need to remove all keys which are not checked

|

Collectives™ on Stack Overflow

Need to post multi dimensional JSON from Angularjs form

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related