Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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.

share|improve this question
    
Try flowComponents.edition.push(data); – shivas Apr 27 '15 at 21:05
    
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 Apr 27 '15 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 Apr 27 '15 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 Apr 27 '15 at 22:09
up vote 1 down vote accepted

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.