Array value becomes null while passing from Ajax

Question

I am making an ajax call in my javascript submit function. In this ajax call, I am passing an array(globalSelection) as data to the servlet. This array consists elements of function textSelection which is also pasted below.

globalSelection =[];

function submit() {

    console.log("globalSelection start")
    console.log(globalSelection)
    console.log("globalSelection end")

        $.ajax({
            async : false,
            type : "POST",
            url : 'http://example.com:8080/myApp/DataServlet',
            data: {globalSelection:globalSelection},
            success : function(data) {
                alert(data)
            },
            error : function(data, status, er) {
                alert("error: " + data + " status: " + status + " er:" + er);
            }
        }); 

}

function textSelection(range, anchorNode, focusNode) {
    this.range = range;
    this.type = 3;
    this.rCollection = [];
    this.textContent = encodeURI(range.toString());
    this.anchorNode = anchorNode;
    this.focusNode = focusNode;
    this.selectionId = getRandom();
    this.yPOS = getYPOS();

    this.getTagName = function(range) {
        var el = range.startContainer.parentNode;
        return el;
    }
    this.getTagIndex = function(el) {
        var index = $(el.tagName).index(el);
        return index;
    }

    this.simpleText = function(node, range) {
        if (!node)
            var entry = this.createEntry(this.anchorNode, this.range);
        else
            var entry = this.createEntry(node, range);
        this.rCollection.push(entry);
        this.highlight(this.rCollection[0].range);
        this.crossIndexCalc();
        textSelection._t_list.push(this);
        pushto_G_FactualEntry(this);
    }

    this.compositeText = function() {
        this.findSelectionDirection();
        var flag = this.splitRanges(this.anchorNode, this.focusNode,
                this.range.startOffset, this.range.endOffset);
        if (flag == 0) {
            for (j in this.rCollection) {
                this.highlight(this.rCollection[j].range);
            }
        }
        this.crossIndexCalc();
        textSelection._t_list.push(this);
        pushto_G_FactualEntry(this);
    }

}

I am ading the screen of my browser console below, which prints the globalSelection(array).

In my servlet I am getting this array as follows

String[] arrays = request.getParameterValues("globalSelection[]");
System.out.println(arrays);

Here I am getting null value for arrays.

If I put globalSelection as follows in submit function for simple test to servlet, I am able to get the arrays.

var globalSelection = ["lynk_url", "jsonBody", "lynk_dummy1", "lynk_dummy2", "lynk_name", "lynk_desc", "lynk_flag"];

Why my actual globalSelection is shows null in servlet, what I am doing wrong here.

Answer 1

Try with : String[] arrays = request.getParameterValues("globalSelection"); System.out.println(arrays);

Because the parameter submitted with name "globalSelection" only not "[]" symbol .

Answer 2

I see your problem and I have a simple solution.

I recommend in that case that you convert the array as a string in JS:

JSON.stringify(globalSelection) 

and then reconstructing the object on the backend using some sort of library for JSON conversion like: https://code.google.com/archive/p/json-simple/

You could then do something like this:

JSONArray globalSelection = (JSONArray) new JSONParser().parse(request.getParameter("globalSelection"));
    Iterator i = globalSelection.iterator();

    while (i.hasNext()) {
        JSONObject selection = (JSONObject) i.next();
        String type = (String)selection.get("type");
        System.out.println(type);
    }

This will parse your array and print the selection type. Try it, hope it helps.