CODEWITHSUNDEEP
javascriptjqueryajaxjsonjsp
Harry
Harry

Reputation: 548

JSONArray JSP Ajax Jquery

EDIT:

Can I produce JSON as: "headers":[ "ID", "Organization Name", "Submission Date", "Status" ] instead of "headers":{"Status":"","Submission Date":"","Organization Name":"","ID":""} using JsonArray/JsonObject?

Original question:

I'm trying to create a JSONArray in the controller and using it in jquery/ajax. But it doesn't work when I try to access the json in javascript. This is the JSON output (almost what I want except the header need to have only the key):

[{"menu":{"extra":"","role":"users","name":"Home","url":"google.com"}},{"organization":{"status":"locked","submitted":"03/11/2015","name":"ABC Company","id":"1"},"headers":{"Status":"","Submission Date":"","Organization Name":"","ID":""}},{"notificationList":{"createdId":"21","startTimestamp":"2015-05-12T18:30:28.237Z","active":"true","endTimestamp":"2015-05-13T12:30:30.237Z","id":1,"description":"One","createdTimestamp":"2015-05-12T18:15:28.237Z"}},{"data":{"createdId":"251","startTimestamp":"2015-05-26T19:30:28.237Z","active":"true","endTimestamp":"2015-06-13T11:30:30.237Z","id":"102","description":"Notification 2","createdTimestamp":"2015-05-14T16:15:28.237Z"},"notificationHeaders":{"End Time":"","End Date":"","Active":"","Start Time":"","ID":"","Start Date":"","Description":""}}]

Javascript - Here is where I'm missing:

mainmenu = (function () {
    var mainmenu = null;
    $.ajax({
        type: "GET",
        contentType: "application/json",
        url: "<%=aURL%>",
        dataType: "json",
        success: function (mainMenuJson) {
            alert(mainMenuJson.menu.url);
            mainmenu = mainMenuJson;
        }
    });
    return mainmenu;
})();

It errors out here - undefined. 

alert(mainMenuJson.menu.url);

alert (mainMenuJson) prints :

[object Object],[object Object],[object Object],[object Object]

And when I try to parse the JSON using:

var content= JSON.parse(mainMenuJson);

I get a parse error at line 1 column2

Once this works, also i need to render the whole page using javascript by making use of the mainmenu variable. Something like this:

var nheaders = mainmenu.notificationHeaders;
for(var i=0; i<nheaders.length; i++ ){
    var notificationTableTheadTh = document.createElement("th");
    notificationTableTheadTh.innerHTML = nheaders[i];
    notificationTableTheadTh.setAttribute('scope',"column");
    notificationTableTheadTr.appendChild(notificationTableTheadTh);
}
....
....
....

Upvotes: 2

Views: 343

Answers (1)

lshettyl
lshettyl

Reputation: 8171

It's a JSON array, so you need:

mainMenuJson[0].menu.url // <--- google.com

Edit:

And your code could be re-written as the following.

function getMenu() {
    return $.ajax({
        type: "GET",
        contentType: "application/json",
        url: "<%=aURL%>",
        dataType: "json"
    })
}

getMenu().done(function(json) {
    var nheaders;
    //Looping as you may not know the position of the key in your JSON. If you did, then it'd be simply --> var nheaders = json[3]["notificationHeaders"];
    json.forEach(function(val, key) {
        if (val.hasOwnProperty("notificationHeaders")) {
            nheaders = val.notificationHeaders;
            for (var nKey in nheaders) {
                //Do stuff
                alert ("Key: " + nKey + " and Value: " + nheaders[nKey]);
                //Use jQuery for the below code chunk as well.
                //var notificationTableTheadTh = document.createElement("th");
                //notificationTableTheadTh.innerHTML = nheaders[i];
                //notificationTableTheadTh.setAttribute('scope',"column");
                //notificationTableTheadTr.appendChild(notificationTableTheadTh);         
            }
        }
    });
});

Hope that helps.

Upvotes: 1

Related Questions