Search code examples
javascriptjsonjquery-uijsonresult

Add Property dynamically to the JSON array

I would like to two add property Id and ButtonId to the exisiting json result. I have pasted the below js code for reference and I would like to pass the jsonresult to MVC controller. As of now it returns null. please help to proceed. Thanks.

my final result should look like this

json{"Groups":{"Id":"2","ButtonId":"1142","1186","1189"}, {"Id":"3","ButtonId":"1171","1173","1174","1175","1176","1187"}, {"Id":"4","ButtonId":"1177","1178","1179"}} etc..

 var btnlist = {Groups: {Id:"", ButtonId: ""}};                
  $.each($(".buttonData"), function (index, value) {
   var values = value.id.split(':');                            
   grpid = values[0].split('-')[1];
   btnid = values[1].split('-')[1];
   
    console.log('grpid=' + grpid + ' btnid=' + btnid);

    if (typeof (btnlist['Groups'][grpid]) == 'undefined') {
        btnlist['Groups'][grpid] = [];
      }      
        btnlist['Groups'][grpid].push(btnid);    
    });    

  $.ajax({
        type: "POST",
        url: "@Url.Action("Home", "Menu")",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(btnlist) ,        
        success: function (result) {        
        console.log('json' + JSON.stringify(btnlist));
        console.debug(result);
        },
        error: function (request, error) {      
        console.debug(error);
         }
      });

This is the json result before pushing into the multidimensional array result

The json result, where the properties Id and ButtonId is inserted behind. json result

null result passed to the controller controller

Solution

  • With assistance of my colleague, the desired output is as below. This is for other programmers who face similar issue with JSON array. Thanks. 

             var btnlist = [];
              btngrps = $('.btn-sort-container');
              $.each(btngrps, function(k, v) {
                btnarr = {};

                gid = $(this).attr('id');
                grpid = gid.split('-')[1];
                btnarr.Id = gid.split('-')[1];

                btnobjs = $(v).find('.buttonData');
                if (btnobjs.length) {
                  btnarr['btnId'] = [];
                  $.each(btnobjs, function(bk, bv) {

                    btnid = $(bv).attr('id').split('-')[2];

                    btnarr['btnId'].push($(bv).attr('id').split('-')[2]);

                  });
                  console.debug(btnarr);
                  btnlist.push(btnarr);
                }
              });
              console.debug(btnlist);

    Output on console

    ]: https://i.sstatic.net/oJ3Dy.png