JSON result format with JS

Question

I have an input form like this:

 <div class="form-group">
            <label class="text-info">name</label>
            <input type="text" id="name" class="form-control" />
 </div>

and a basic script like below:

$(document).ready(function () {
        $("#postform").submit(function (e) {
            e.preventDefault();
            var data = {
                name: $("#name").val().trim(),
                requestID: $("#requestID").val().trim(),
                label: $("#label").val().trim(),
                contractTypeID: $("#contractTypeID").val().trim(),
                contractID: $("#contractID").val().trim(),                
            }
            console.log('{"ABC":' + JSON.stringify(data) + '}')
               ....

        })
    })

The results JSON with following:

{
    "name": "Demo",
    "REQID": "1234aa",
    "label": "123",
    "contractTypeID": "321",
    "contractID": "1234",
}

But, I need result to be formatted like this:

{
   "ABC":{
      "name":"Demo",
      "REQID":"1234aa",
      "Group":{
         "label":"123",
         "contractTypeID":"321",
         "contractID":"1234"
      }
   }
}

Is there a simple way to accomplish this or I will need to hardcode result?

Answer 1

If you're using the arbitrary key "ABC" as per your example, you can just wrap your data structure into that pre-defined parent object:

var data = {
  "name": "Demo",
  "REQID": "1234aa",
  "label": "123",
  "contractTypeID": "321",
  "contractID": "1234",
};

var modifiedData = {

  "ABC": {
    "name": data.name,
    "REQID": data.REQID,
    "Group": {
      "label": data.label,
      "contractTypeID": data.contractTypeID,
      "contractID": data.contractID
    }
  }

};

console.log(modifiedData);

Answer 2

Try

var data = { 
  ABC: {
    name: $("#name").val().trim(),
    REQID: $("#requestID").val().trim(),
    Group: {
      label: $("#label").val().trim(),
      contractTypeID: $("#contractTypeID").val().trim(),
      contractID: $("#contractID").val().trim(),                
    }
  }
}

console.log(JSON.stringify(data))

Answer 3

There are a few ways to do this. Another way is to build up your javascript object in stages like this:

var data = { ABC: { Group: {}}};
data.ABC.name = 'Demo';
data.ABC.REQID = '1234aa';
data.ABC.Group.label = '123';
data.ABC.Group.contractTypeID = '321';
data.ABC.Group.contractID = '1234';

console.log(JSON.stringify(data));

Just remember that javascript objects do not support order like javascript arrays do, so it won't look exactly how you specified it but this does produce the object you specified.

Here's a working fiddle.