How to post data in JSON array

Question

"type_of_advertisement":["ATM","Banner/Poster","Stalls"]

html code is

    input(type='checkbox', value='Mobile/Communication Tower', ng-model='type_of_advertisement')
                | Mobile/Communication Tower
              label.checkbox-inline
                input(type='checkbox', value='Banner/Poster', ng-model='type_of_advertisement')
                | Banner/Poster
              label.checkbox-inline
                input(type='checkbox', value='Hoarding Board', ng-model='type_of_advertisement')
                | Hoarding Board
              label.checkbox-inline
                input(type='checkbox', value='Stalls', ng-model='type_of_advertisement')
                | Stalls
              label.checkbox-inline
                input(type='checkbox', value='Digital Offline Marketing', ng-model='type_of_advertisement')
                | Digital Offline Marketing
              label.checkbox-inline
                input(type='checkbox', value='Area for Product Display', ng-model='type_of_advertisement')
                | Area for Product Display

angular code is

type_of_advertisement:[$scope.type_of_advertisement]

The problem occurs is when i hit a one check box all check boxes automatic select. and get the api response like

"type_of_advertisement":["true"]

So what can i code so i get the desired api result.

tanmay · Accepted Answer · 2017-04-10 07:31:08Z

2

I would solve it by having an array like this:

$scope.rows = [{
    value: "Mobile/Communication Tower"
  }, {
    value: "Banner/Poster"
  }, {
    value: "Hoarding Board"
  }, {
    value: "Stalls"
  }];

And HTML (inside ng-repeat):

<input type="checkbox" ng-model="row.selected" />{{row.value}}</label>

Now, before calling API, you can reform your array, something like this:

$scope.submit = function() {
    $scope.selectedRows = $scope.rows.reduce(function(arr, val) {
        if(val.selected) arr.push(val.value)
      return arr
    }, []);
  };

to get $scope.selectedRows becomean array like this:

[
  "Banner/Poster",
  "Hoarding Board"
]

working example

edited Apr 10, 2017 at 7:31

answered Apr 10, 2017 at 7:05

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

1 Comment

tanmay Over a year ago

@aviralgarg glad I could help :)

Raphael Parreira · Accepted Answer · 2017-04-10 06:48:52Z

0

Edit: Working Plunker - https://embed.plnkr.co/mJijSg/

All the elements are binded to the same ng-model. When you change its value, all the checkboxes will change. Use differents ng-models.

In this example, I wrote several checkboxes with the same ng-model and differents ng-models.

edited Apr 10, 2017 at 6:48

answered Apr 10, 2017 at 6:34

Raphael Parreira

4684 silver badges14 bronze badges

Comments

Jai · Accepted Answer · 2017-04-10 06:53:58Z

0

You can make use of requiring ngmodel in a directive:

input(type='checkbox', data-toa="" value='Mobile/Communication Tower', ng-model='type_of_advertisement')
// at all the inputs put a directive called "toa" 

app.directive('toa', function() { //<---bind a directive here
   return {
     restrict: 'A', 
     require: '?ngModel', // get a hold of NgModelController
     link: function(scope, element, attrs, ngModel) {
       if (!ngModel) return; 

       element.on('change', function() {
         if(element.checked){
            scope.type_of_advertisement.push(element.value);
         }
       });
    }
});

answered Apr 10, 2017 at 6:53

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

How to post data in JSON array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related