How to create JSON data using javascript and jquery

Question

I want to create a JSON Object dynamically with the following format:

{
    "deleteId":[1,2,3],
    "pointId":[1,2,3],
    "update":[
        {
            "what":"mission",
            "id":1,
            "value":"adsda"
        },
        {
            "what":"mission",
            "id":2,
            "value":"sadjajks"
        },
        {
            "what":"point",
            "id":3,
            "value":"asjdjh"
        }
    ]
}

I'm getting data in my controller as shown below.

edit_vision_mission.controller('edit_vision_missionCtrl',['$scope','$http', 'getMissionDataService', function($scope, $http, getMissionDataService) {
    $scope.visiontext = "Here is the content of vision";
    getMissionDataService.getMissionData().success(function(response){
       $scope.missions = response;
       $scope.len = $scope.missions.length;
    });
    var jsonData = {};
    jsonData.deleteId = [];
    jsonData.pointId = [];
    jsonData.update = [];
    $scope.deletemission = function(missionid){
        jsonData.deleteId.push(missionid);
        alert("deleted " + jsonData.deleteId);
    };

    $scope.deletemissionpoints = function(missionpointid){
        jsonData.pointId.push(missionpointid);
        console.log(missionpointid);
        alert("deleted " + jsonData.pointId);
    };

    $scope.updatemission = function(missionid, info){
       var updateinfo = {"what" : "mission", "id" : missionid, "value" : info};
       jsonData.update.push(updateinfo);
       alert("updated " + jsonData.update);
    };

    $scope.updatemissionpoints = function(missionpointid, info){
        var updateinfo = {"what" : "point", "id" : missionpointid, "value" : info};
       jsonData.update.push(updateinfo);
       alert("updated " + jsonData.update);
    };
}]);

I'm struggling to make the JSON data of the above format, jsonData.update does not show anything in the alert.

I needed help on how to make JSON of the above format.

I also wanted to know the way to test JSON data in the front end?

Answer 1

jsonData is an object. So your alert should show "updated" [ object Object ].

All the methods above seems fine.

To view your object in more clean way use developer tools by chrome. There is a last tab called console. You can open up developer tools by right clicking on your page and select inspect element.

You need to update your code to following,

Rather than doing this alert( "updated" + jsonData.update ), do console.log( jsonData.update )

Mixing 2 types in console.log() doesn't allow it to parse.

E.g. from your above sample & code.

var sample = '{"deleteId":[1,2,3],"pointId":[1,2,3],"update":[ {"what":"mission","id":1,"value":"adsda" }, {"what":"mission","id":2,"value":"sadjajks" }, {"what":"point","id":3,"value":"asjdjh" }]}';

var jsonData = {};

jsonData.deleteId = [];
jsonData.pointId = [];
jsonData.update = [];

var deletemission = function(missionid){
    jsonData.deleteId.push(missionid);
    console.log (  " deleted " );
    console.log ( jsonData.deleteId );
};

var deletemissionpoints = function(missionpointid){
    jsonData.pointId.push(missionpointid);
    console.log (  " deleted " );
    console.log ( jsonData.pointId );
};

var updatemission = function(missionid, info){
   var updateinfo = {"what" : "mission", "id" : missionid, "value" : info};
   jsonData.update.push(updateinfo);
   console.log (  " updated " );
   console.log ( jsonData.update );
};

var updatemissionpoints = function(missionpointid, info){
    var updateinfo = {"what" : "point", "id" : missionpointid, "value" : info};
   jsonData.update.push(updateinfo);
   console.log (  " updated " );
   console.log ( jsonData.update );
};

sample = JSON.parse( sample );

for( var i = 0 ; i < sample.deleteId.length; i++ ) {
  deletemission( sample.deleteId[i] );
}

for( i = 0 ; i < sample.pointId.length; i++ ) {
  deletemissionpoints( sample.pointId[i] );
}

for( i = 0 ; i < sample.update.length; i++ ) {

  if ( sample.update[i].what == "mission") {
    updatemission(  sample.update[i].id , sample.update[i].value )
  } else {
    updatemissionpoints(  sample.update[i].id , sample.update[i].value )
  }

}

console.log( jsonData );