How can I pass a Camunda process variable containing JSON from one form to the next?

I want to get json array Data from service and then display this data inside table (with checkboxes) after that i want to get data ( which was checked by user , i mean checkbox was clicked) and put it another json Array and then wrap this variable as camVariable in order to export it for second user form, i have tried this in several ways but can’t accomplish my goal, what should i change to make it possible? here is my code:

camForm.on('form-loaded', function() {

      camForm.variableManager.fetchVariable('jsonData');
    });
    camForm.on('variables-fetched', function() {
      $scope.jsonData = camForm.variableManager.variableValue('jsonData');
    });

var  selectedDocuments=$scope.selectedDocuments=[];
 $scope.content = '';

 $scope.isChecked = function(id){
      var match = false;
      for(var i=0 ; i < $scope.selectedDocuments.length; i++) {
        if($scope.selectedDocuments[i].id == id){
          match = true;
        } 

      }

      return match;
  };
  $scope.sync = function(bool, item){

    if(bool){
      // add item
      $scope.selectedDocuments.push(item);
    } else {
      // remove item
      for(var i=0 ; i < $scope.selectedDocuments.length; i++) {
        if($scope.selectedDocuments[i].id == item.id){
          $scope.selectedDocuments.splice(i,1);
        }
      }      
    }
  };

  camForm.on('submit', function() {
      camForm.variableManager.createVariable({
        name: 'selectedDocuments',
        type: 'json',
        value:$scope.selectedDocuments
      });
    });

function toJsonValue(arr) {
var myJSON = "";
var FinalResult = JSON.stringify(arr);
myJSON = JSON.stringify({FinalResult});
var json=$scope.json={};
json=JSON.parse(myJSON);
return json;
}

 $scope.toggle = function (index){
    if($scope.jsonData[index].hidethis == undefined){
        $scope.jsonData[index].hidethis = true;
    }else{
        $scope.jsonData[index].hidethis = !$scope.jsonData[index].hidethis;
    }       
    }
</script>
<h2>My job List</h2>                                                                                                                                                                                     
    <div class="container">
        <table name ="table" class="table table-hover" style="width:100%;" cellspacing="0">
            <thead>
                <tr>
                    <th style="width:80px; height:25px;"><input style="width:25px; height:25px;" type="checkbox" onclick="checkAll(this)"></th>
                    <th style="width:140px;">id</th>
                    <th style="width:305px;">organizationNameEN</th>
                    <th style="width:305px;">organizationNameGE</th>
                     <th>&nbsp;</th>

                </tr>           
            </thead>
            <tbody ng-repeat="item in jsonData" >
                <tr>
                    <td><input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item.id)"  ></td> 
                    <td><input style="width:305px;" type="number" id="id"  ng-model="item.id" readonly /></td>
                    <td><input style="width:305px;" type="text" id="organizationNameEN"  ng-model="item.organizationNameEN"  required /></td>
                     <td><input style="width:305px;" type="text" id="organizationNameGE"  ng-model="item.organizationNameGE"  required/></td>                     
                     <td><button class="btn btn-default btn-xs" ng-click="toggle($index)"><span class="glyphicon glyphicon-eye-open"></span></button></td>


    </tr>   
    <tr id="{{hideid + $index}}" ng-show="item.hidethis">
            <td>
    <label for="startDate" class="control-label">startDate</label>
     <div class="controls">
      <input style="width:105px;" id="strtDate" class="form-control" type="text" ng-model="item.startDate" required  readonly/>
      </div>
      <br>
      <label for="endDate" class="control-label">endDate</label>
       <div class="controls">
      <input style="width:105px;" id="endDate" class="form-control" type="text" ng-model="item.endDate" required  readonly/>
      </div>
    </td>
        </tr>               
   </tbody>
  </table>
    </div>

    <script>
function checkAll(bx) {
      var cbs = document.getElementsByTagName('input');
      for(var i=0; i < cbs.length; i++) {
        if(cbs[i].type == 'checkbox') {
          cbs[i].checked = bx.checked;
        }
      }
    }

</script>
</form>

Solution

I do something similar. In my first form, the user captures some transactions. Form 2 they double-capture (new transactions which must match the first capture) and form 3 they view they successful transactions and authorise them.

I have handled this by creating a JSON array of transactions in the first form. I save this to a process variable in the on-submit event using code like this:

camForm.on('submit', function() {
  // this callback is executed when the form is submitted, *before* the submit request to
  // the server is executed

  // creating a new variable will add it to the form submit
  variableManager.createVariable({
    name: 'customVariable',
    type: 'String',
    value: 'Some Value...',
    isDirty: true
  });

I retrieve it in the subsequent forms like you do in the form-loaded/variables-fetched events.

If the JSON array data is updated in subsequent forms, I save it back to the same variable using code like this:

camForm.on('submit', function(evt) {
  var fieldValue = customField.val();
  var backendValue = variableManager.variable('customVariable').value;

  if(fieldValue === backendValue) {
    // prevent submit if value of form field was not changed
    evt.submitPrevented = true;

  } else {
    // set value in variable manager so that it can be sent to backend
    variableManager.variableValue('customVariable', fieldValue);
  }
});

These code snippets are from the Camunda documentation.