Question

I need to create data for a JSON request with the inputs taken from an html form. The data format that I want to generate is like below.

    {
   "applicationName":"Tesing",
   "cpuCount":"12",
   "hostdescName":"localhost",
   "maxMemory":"0",
   "maxWallTime":"0",
   "minMemory":"0",
   "nodeCount":"1",
   "processorsPerNode":"12",
   "serviceDesc":{
      "inputParams":[
         {
            "dataType":"input",
            "description":"my input",
            "name":"myinput",
            "type":"String"
         },
         {
            "dataType":"input",
            "description":"my input",
            "name":"myinput",
            "type":"String"
         }
      ],
      "outputParams":[
         {
            "dataType":"output",
            "description":"my output",
            "name":"myoutput",
            "type":"String"
         },
         {
            "dataType":"output",
            "description":"my output",
            "name":"myoutput",
            "type":"String"
         }
      ]
   }
}

My code looks like below;

    var jasonRequest = {};
    jasonRequest["applicationName"] = appName;
    jasonRequest["cpuCount"] = cpuCount;
    jasonRequest["hostdescName"] = hostName;
    jasonRequest["maxMemory"] = maxMemory;
    jasonRequest["maxWallTime"] = ""; //TODO
    jasonRequest["minMemory"] = ""; //TODO
    jasonRequest["nodeCount"] = nodeCount;
    jasonRequest["processorsPerNode"] = ""; //TODO

    var inArray = new Array();
    for(var j=0; j<inputCount; j++) {
        var input = {};
        input["dataType"] = "input";
        input["description"] = "empty";
        input["name"] = $("#inputName" + j+1).val();
        input["type"] = $("#inputType" + j+1).val();

        inArray[j] = input;
    }

    var outArray = new Array();
    for(var j=0; j<outputCount; j++) {
        var output = {};
        output["dataType"] = "output";
        output["description"] = "empty";
        output["name"] = $("#outputName" + j+1).val();
        output["type"] = $("#outputType" + j+1).val();

        outArray[j] = output;
    }

    var serviceDesc = {};
    serviceDesc["inputParams"] = inArray;
    serviceDesc["outputParams"] = outArray;

    jasonRequest["serviceDesc"] = serviceDesc;


    alert("printing inArray");
    alert(inArray.toSource().toString());
    alert(JSON.stringify(jasonRequest));

The data created by this code is like below. I could use strings and create the message by concatenating it but I don’t think that is a nice way of doing this. As you can see the inputParams and outputParams are not properly populated. Can you suggest how can I properly generate this message.

{
   "applicationName":"Tesing",
   "cpuCount":"12",
   "hostdescName":"localhost",
   "maxMemory":"0",
   "maxWallTime":"0",
   "minMemory":"0",
   "nodeCount":"1",
   "processorsPerNode":"12",
   "serviceDesc":{"inputParams":"","outputParams":[]}}

[EDIT]
My code looks like below.

    $(document).ready(function(){
        var inputCount = 0;
        var outputCount = 0;

        $("p1").live("click", function(){
            inputCount++;
            $(this).after("<br/>");
            $(this).after("Input Name         *:" +
                    "<input type=&quot;text&quot; id=&quot;inputName" + inputCount + "&quot; name=&quot;inputName" + inputCount + "&quot; value=&quot;echo_input&quot; size=&quot;50&quot;><br/>");

            $(this).after("Input Type         *:" +
                    "<input type=&quot;text&quot; id=&quot;inputType" + inputCount + "&quot; name=&quot;inputType" + inputCount + "&quot; value=&quot;String&quot; size=&quot;50&quot;><br/>");
        });

        $("p2").live("click", function(){
            $(this).after("Output Name         *:" +
                    "<input type=&quot;text&quot; id=&quot;outputName" + outputCount + "&quot; name=&quot;outputName" + outputCount + "&quot; value=&quot;echo_output&quot; size=&quot;50&quot;><br/>");
            $(this).after();

            $(this).after("Output Type         *:" +
                    "<input type=&quot;text&quot; id=&quot;outputType" + outputCount + "&quot; name=&quot;outputType" + outputCount + "&quot; value=&quot;String&quot; size=&quot;50&quot;><br/>");
        });

        $('[name="btn2"]').click(function(){
            var appName = $("#appName1").val();
            var exeuctableLocation = $("#exeuctableLocation1").val();
            var scratchWorkingDirectory = $("#scratchWorkingDirectory1").val();
            var hostName = $("#hostName1").val();

            var projAccNumber = $("#projAccNumber1").val();
            var queueName = $("#queueName1").val();
            var cpuCount = $("#cpuCount1").val();
            var nodeCount = $("#nodeCount1").val();
            var maxMemory = $("#maxMemory1").val();

            var serviceName = $("#serviceName1").val();
            var inputName1 = $("#inputName1").val();
            var inputType1 = $("#inputType1").val();
            var outputName = $("#outputName1").val();
            var outputType = $("#outputType1").val();

            var jsonRequest = {};
            jsonRequest["applicationName"] = appName;
            jsonRequest["cpuCount"] = cpuCount;
            jsonRequest["hostdescName"] = hostName;
            jsonRequest["maxMemory"] = maxMemory;
            jsonRequest["maxWallTime"] = ""; //TODO
            jsonRequest["minMemory"] = ""; //TODO
            jsonRequest["nodeCount"] = nodeCount;
            jsonRequest["processorsPerNode"] = ""; //TODO

            var inArray = [];
            for(var j=0; j<inputCount; j++) {
                var input = {};
                input["dataType"] = "input";
                input["description"] = "empty";
                input["name"] = $("#inputName" + j+1).val();
                input["type"] = $("#inputType" + j+1).val();

                inArray[j] = input;
            }

            var outArray = new Array();
            for(var j=0; j<outputCount; j++) {
                var output = {};
                output["dataType"] = "output";
                output["description"] = "empty";
                output["name"] = $("#outputName" + j+1).val();
                output["type"] = $("#outputType" + j+1).val();

                outArray[j] = output;
            }

            var serviceDesc = {};
            serviceDesc["inputParams"] = inArray;
            serviceDesc["outputParams"] = outArray;

            jsonRequest["serviceDesc"] = serviceDesc;


            alert("printing inArray");
            alert(inArray.toSource().toString());
            alert(JSON.stringify(jsonRequest));


            $.ajax({
                beforeSend: function(x) {
                    if (x && x.overrideMimeType) {
                        x.overrideMimeType("application/j-son;charset=UTF-8");
                    }
                },
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                url: "http://localhost:7080/airavata-registry-rest-services/registry/api/applicationdescriptor/build/save/test",
                data: jasonRequest
            }).done(function( msg ) {
                        alert( "Data Saved: " + msg );
                    });

        });
    });
</script>

Answer 1

What’s inputCount and outputCount? Seems like they are zero or NaN or something, so you get empty arrays. Yet, your code will still print "inputParams":[] instead of "inputParams":"".

To get a nice output (not that it would be needed for your app, only for debugging), you can use the third parameter of JSON.stringify.