Unable to convert JSON response into HTML table using javascript

Question

I am getting the below json response from the servelet for the ajax request but unable to convert the data into table and display it in jsp.

[{
  "ordernumber": 123456,
  "slotservice": "Collection       ",    
  "deliverydate": "Jul 1, 2017"
}]

Below is my javascript which does the ajax request,

    function addData(){
    if(window.XMLHttpRequest) { //Assuming you're not on one of the old IEs.
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST","Order",true);        
    var formData = new FormData(document.getElementById('orderform'));
    xhttp.send(formData);
    console.log('This is Ajax request to the order controller');
    xhttp.onreadystatechange=function() {
        if (xhttp.readyState == 4 && (xhttp.status == 200)) {
            var myArr = JSON.parse(xhttp.responseText);
            console.log(JSON.stringify(myArr));
            var tr;
            for (var i=0;i<myArr.length;i++){
                tr = $('<tr/>');
                tr.append("<td>"+myArr[i].ordernumber+ "</td>");
                tr.append("<td>"+myArr[i].slotservice+ "</td>");
                tr.append("<td>"+myArr[i].deliverydate+ "</td>");
                $('ViewOrderResultContainer').append(tr);
                console.log
            }               
        }
        }       
        }
        else console.log('not working');
        }

Below is the table defined in my index.jsp

    <div id="divOrderResultContainer">
        <table id="ViewOrderResultContainer" border=1>
    <thead>
        <tr>
            <th>OrderNumber</th>
            <th>ServiceType</th>
            <th>DeliveryDate</th>
        </tr>
    </thead>
    </table>
    </div>

Can anyone explain me what i am doing wrong here and how can i get the expected results.

Edit 1: I have now updated my servlet like below but its still not printing the HTML table response in my jsp

 function addData(){
  if(window.XMLHttpRequest) { 
    var xhttp = new XMLHttpRequest();       
    xhttp.onreadystatechange=function() {
        if (xhttp.readyState == 4 && (xhttp.status == 200)) {
            var jsonorderdata = JSON.parse(xhttp.responseText);
            for (x in jsonorderdata)    
                 txt += "<tr><td>" + myObj[x].ordernumber+ "</td><td>" + 
 myObj[x].slotservice+ "</td><td>" + myObj[x].deliverydate+ "</td>"
                 "</tr>";
             }
            document.getElementById("ViewOrderResultContainer").innerHTML = 
txt;
            }
            }   
        xhttp.open("POST","Order",true);        
        var formData = new FormData(document.getElementById('orderform'));
        xhttp.send(formData);
        }   
    else console.log('not working');
}

Additionally my javascript gives 304:not modified response in chrome , can anyone please help me on how to get the table in jsp.

@melpomene - Updated the valid JSON..

chimbu
– chimbu

2017-08-19 15:59:30 +00:00
Commented Aug 19, 2017 at 15:59 — chimbu
– chimbu, Commented Aug 19, 2017 at 15:59

brk · Accepted Answer · 2017-08-19 13:14:44Z

1

You are missing selector in $('ViewOrderResultContainer').append(tr);. Add # to select an element by id

$('#ViewOrderResultContainer').append(tr);

answered Aug 19, 2017 at 13:14

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chimbu Over a year ago

Hi, I have now added the selector but it's still the table is not displayed in the jsp page ..from the console log I can see the response from servlet passed fine to JavaScript but is not formatting the table .

Collectives™ on Stack Overflow

Unable to convert JSON response into HTML table using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related