How to add to an array within existing json object in Angular?

Question

My json object, "flowComponents" contains a string (name) and an array of strings (edition). For example:

    {
  "_id": "553e87f3205465e83b46999b",
  "name": "FLOWCOMPONENT_CONTACTCOMBINATION_EDITION",
  "__v": 0,
  "edition": [
    "billing",
    "billingDelivery",
    "default",
    "deliveryAddressOnly",
    "deliveryBillingLicensee",
    "deliveryBillingLicenseeWithWrapper",
    "deliveryLicensee",
    "deliveryOnlyCopyToAll",
    "licenseeDelivery",
    "sassDefault",
    "sassDeliveryOnlyCopyToAll"
  ]
}

I need to add/concat another edition to this existing flowComponents object. My form has a dropdown with the names of the existing flowComponents, and a text area that makes an array of each line of text:

<form ng-submit="addToExistingFlowComponent()">
    <div class="interact">
        <select ng-model="existingName" chosen options="flowComponents" ng-options="item as item.name for item in flowComponents" data-placeholder="Select a flow component...">
            </select>
    </div>

    <div class="interact">
        <label class="interact-label">Enter each edition on a new line.</label>
        <textarea id="text_area" placeholder="Edition" ng-model="existingEditionList" ng-list="&#10;" ng-trim="false"></textarea>
    </div>
    <button type="submit">Submit</button>
</form>

This is the add edition method in my controller:

$scope.addToExistingFlowComponent = function(){
  if(!$scope.existingName || $scope.existingName === '') { return; }

  var existingFC = $scope.existingName._id;

  sendAppData.postEdition( existingFC, {
    edition: $scope.existingEditionList
  });

  $scope.existingName = '';
  $scope.existingEditionList = '';
};

And this is the method that posts the data to the server:

this.postEdition = function(existingFC, newEdition) {
   return $http.post('/new-flow-component', newEdition).success(function(data){
        flowComponents.push(data);
    });
};

The problem is, this is pushing the data to a new object rather than adding to the existing object. I'm able to pass the _id of the existing object to the existingFC parameter, but I can't figure out how to get that inside of function(data) in order to push it into the correct edition array.

is 'this.postEdition' part of a service ? Why "existingFC" is not present in the method that posts the data ? I think you have to target it. It would be easier if your "flowComponents" could be targeted with : flowComponents[existingFC].push(data) — or — flowComponents[existingFC]['edition'].push(data), depending on what you are trying to achieve. So maybe you'll want to refactor your JSON object structure? — Christian Bonato
– Christian Bonato, Commented Apr 27, 2015 at 21:07
yes, this.postEdition is part of the sendAppData service. I can't figure out how to get existingFC into the method is part of the problem. It's coming in before the return, but I'm not understanding how to get it into the success function. Once I have that figured out I'm hoping I can do something like flowComponents[existingFC]['edition'].push(data) — Steph
– Steph, Commented Apr 27, 2015 at 21:14
.push() doesn't work on an object, so you can't push onto flowComponents. If flowComponents is a single object that gets updated (not duplicated) then you want to do as @shivas suggested. Another question is how does the postedition method know what flowComponents is? It is not being passed in and if it belongs to the controller you are going to have to refer to it like $scope.flowComponents or something like that. — claywhipkey
– claywhipkey, Commented Apr 27, 2015 at 22:09

shivas · Accepted Answer · 2015-04-28 00:03:49Z

I modified your code to get the new editions from the text area append to your selected edition array. I removed the posting to server and just have it where the submitted "new" editions get appended to the edition array. Here is the Plunker for this example: http://plnkr.co/edit/U2BE9Sdlictj9dEIWkjc?p=preview

Hope this help you

Controller:

app.controller('MainCtrl', function($scope) {

$scope.flowComponents = [{
  "_id": "553e87f3205465e83b46999b",
  "name": "FLOWCOMPONENT_CONTACTCOMBINATION_EDITION",
  "__v": 0,
  "edition": [
    "billing",
    "billingDelivery",
    "default",
    "deliveryAddressOnly",
    "deliveryBillingLicensee",
    "deliveryBillingLicenseeWithWrapper",
    "deliveryLicensee",
    "deliveryOnlyCopyToAll",
    "licenseeDelivery",
    "sassDefault",
    "sassDeliveryOnlyCopyToAll"
  ]
}]

$scope.addToExistingFlowComponent = function(){
  if(!$scope.existingName || $scope.existingName === '') { return; }

  var existingFC = $scope.existingName._id;
  var newEdition = {
    edition: $scope.existingEditionList
  };

  console.log($scope.existingName);
  console.log(newEdition);
  for(var i=0;i<$scope.existingEditionList.length;i++){
    $scope.existingName.edition.push($scope.existingEditionList[i]);
  }

  console.log($scope.flowComponents);

  $scope.existingName = '';
  $scope.existingEditionList = '';
}; 

});

Your HTML:

<body ng-controller="MainCtrl">

    <form ng-submit="addToExistingFlowComponent()">
    <div class="interact">
        <select ng-model="existingName" chosen options="flowComponents" ng-options="item as item.name for item in flowComponents" data-placeholder="Select a flow component...">
            </select>
    </div>

    <div class="interact">
        <label class="interact-label">Enter each edition on a new line.</label>
        <textarea id="text_area" placeholder="Edition" ng-model="existingEditionList" ng-list="&#10;" ng-trim="false"></textarea>
    </div>
    <button type="submit">Submit</button>
</form>

  </body>

Collectives™ on Stack Overflow

How to add to an array within existing json object in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related