how to get formatted/require json array as per dynamic data

Question

I'm having two dropdowns(ddls). when page loads, first ddl gets loaded with data. User can make his choice in first ddl and according to that second ddl gets filled with source(happens dynamically every time).

below these dropdowns, there is add button. if user clicks add button again in new row two dropdowns come and same scenario is then applicable. more no of rows can be added by add buttons .

beside two ddls, there is one remove buttons by pressing which particular row can be deleted.

No question is how can i get desire json array in specific format as described below.

i want json array like this....

$scope.project=[{
    securityId: "first Dropdown selected value" , 
    contactId:"second Dropdown selected value"
}]

(if there is only one row)

for 2 rows, I want length size 2 of $scope.project with desire and appropriate values. for nth rows, the length of $scope.project should be n with appropriate values....

Once have a look at already made fiddle, you will come to know more. please check your browser console. I'm getting $scope.project array but not in required format.

It could be very easy for angular lovers. I don't know why i'm not getting the solution.

http://jsfiddle.net/micronyks/ZwwH7/6/

html

<html ng-app>
    <div ng-controller="ctrl">

        <div ng-repeat="additional in additionals">
        <select ng-model="additional.securityId"  ng-change="selectRoles(additional.securityId,additional)" ng-options="w.securityId as w.securityRoleName for w in SecurityRoles"></select>

        <select ng-model="additional.personId"  ng-change="selectperson(additional.personId,additional)" ng-options="w.personId as w.personName for w in additional.Personsddl"></select>
            <button ng-click="remove($index)">remove</button>
        </div>

        <button ng-click="add()">add row</button>
    </div>

</html>

.js file...

function ctrl($scope) {

    $scope.additionals=[{}];

     $scope.project=[{}];

    $scope.SecurityRoles = [{
        securityId: 1,
        securityRoleName: "SuperAdmin"
    }, {
         securityId: 2,
        securityRoleName: "Admin"
    }
        , {
         securityId: 3,
        securityRoleName: "Guest"
    }];

    $scope.Persons = [{
        personId: 1,
        contactId:1,
        personName: "john"
    }, {
         personId: 2,
        contactId:1,
        personName: "jack"
    },{ personId: 3,
        contactId:2,
        personName: "Johnson"
      },{ personId: 4,
        contactId:2,
        personName: "rock"
        },
       { personId: 5,
        contactId:3,
        personName: "bank"

    }];
 $scope.selectRoles=function(id,additional)
    {
    additional.Personsddl=[];
        angular.forEach($scope.Persons,function(record){

            if(record.contactId==id)
            {

                additional.Personsddl.push(record);


            }
        });


        $scope.project.push({roleId:id});

    }

    $scope.add=function()
    {
        $scope.additionals.push({});
    }

    $scope.remove=function($index){

        $scope.additionals.splice($index,1);
    }



        $scope.selectperson=function(id)
    {

        $scope.project.push({contactId:id});

        console.log($scope.project);
    }
}

score 1 · Answer 1 · answered Jul 21 '14 at 20:36

please see here: http://jsfiddle.net/9pqjN/

HTML:

<html ng-app>
    <div ng-controller="ctrl">
        <p>Project :</p> <pre>{{project |json}}</pre>

        <div ng-repeat="user in project">
            <select ng-model="user.securityId" ng-options="w.securityId as w.securityRoleName for w in SecurityRoles"></select>
            <select ng-model="user.personId" ng-options="w.personId as w.personName for w in Persons"></select>
            <button ng-click="remove($index)">remove</button>
        </div>
        <button ng-click="add()">add row</button>
    </div>

</html>

js:

function ctrl($scope) {

    $scope.additionals = [];

    $scope.project = [];

    $scope.SecurityRoles = [{
        securityId: 1,
        securityRoleName: "SuperAdmin"
    }, {
        securityId: 2,
        securityRoleName: "Admin"
    }, {
        securityId: 3,
        securityRoleName: "Guest"
    }];

    $scope.Persons = [{
        personId: 1,
        contactId: 1,
        personName: "john"
    }, {
        personId: 2,
        contactId: 1,
        personName: "jack"
    }, {
        personId: 3,
        contactId: 2,
        personName: "Johnson"
    }, {
        personId: 4,
        contactId: 2,
        personName: "rock"
    }, {
        personId: 5,
        contactId: 3,
        personName: "bank"

    }];




    $scope.add = function () {
        $scope.project.push({});
    }

    $scope.remove = function ($index) {

        $scope.project.splice($index, 1);
    }




}

again you have helped me. I still wonder with that previous help. You told me to explain your answer when you r back to home. but you didn't. just kidding. Thanks a lot for help. — micronyks, Jul 22 '14 at 02:39
@micronyks Hi actually I've updated answer please see here http://stackoverflow.com/questions/24848736/json-parsing-in-mvc-4-web-api-with-angularjs — sylwester, Jul 22 '14 at 08:13

score 1 · Answer 2 · answered Jul 21 '14 at 20:54

sylwester has it almost. Added a filter in my case:

<select ng-model="additional.personId"  
        ng-options="w.personId as w.personName for w in Persons | filter:{contactId: additional.securityId}">
</select>

Here is the complete demo http://jsfiddle.net/9DcXA/1/

Also note, there is no point in having securityId as well as contactId in output json because I see you are filtering the second drop down based on the securityId matching with contactId of Persons. I suppose you meant to show securityId and personId in result.

both answers are useful for me. thanks a lot for making it clear with fiddle. — micronyks, Jul 22 '14 at 02:38

how to get formatted/require json array as per dynamic data

2 Answers2