How to append JSON response output into html table using Javascript

Question

I have this response output (type JSON)--> pass from controller

[["Subash Nisam",test,"Medix Care","2017.03.02","9.30 am to 10.30 am"],["Subash Nisam",test,"Medix Care","2017.03.02","3.30 to 5.30"]]

I want to append it following table tbody using Javascript-->

<table class="table table-bordered table-hover" id="doctorresultTable">
    <thead>
        <tr>
            <th>Doctor Name</th>
            <th>Speciality</th>
            <th>Hospital</th>
            <th>Date</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

How can I do it?

Here is my JS code:

function searchbyNameandDate(name, avadate) {
    var ajaxConfig = {
        type: "GET",
        url: "searchbyNameandDate?name=" + name + "&date=" + avadate,
        async: true,
        dataType: "json"
    };
    $.ajax(ajaxConfig)
            .done(function (response) {

                for (var i = 0; i < response.length; i++) {
                    for (var j = 0; j < 4; j++) {

                        var html = "<tr> \
                <td>" + response[i][j] + "</td> \
                <td>" + response[i][j] + "</td>\
                <td>" + response[i][j] + "</td> \
                <td>" + response[i][j] + "</td> \
                <td>" + response[i][j] + "</td> \
            </tr>";
                        $("#doctorresultTable tbody").append(html);
                    }

                }


            })
            .fail(function (xhr, status, errorMessage) {
                alert("failed to load data");
                console.log("XML HTTP REQUEST : " + xhr);
                console.log("Status : " + status);
                console.log("Error message : " + errorMessage);
            });
    }

}

can i see your code? what u tried so far

Arpit Srivastava
– Arpit Srivastava

2017-10-29 13:21:37 +00:00
Commented Oct 29, 2017 at 13:21 — Arpit Srivastava
– Arpit Srivastava, Commented Oct 29, 2017 at 13:21
I've submitted my js code

max
– max

2017-10-29 15:56:25 +00:00
Commented Oct 29, 2017 at 15:56 — max
– max, Commented Oct 29, 2017 at 15:56

max · Accepted Answer · 2017-10-30 06:53:55Z

1

I replace the arrow functions with usual functions. Now it's work properly. -------------------------@Armen Vardanyan ->Thanks for your help.

Here is the code after replace the arrow functions with usual functions.

const data = [["Subash Nisam",'test',"Medix Care","2017.03.02","9.30 am to 10.30 am"],["Subash Nisam",'test',"Medix Care","2017.03.02","3.30 to 5.30"]];

var tableContent = document.querySelector('#doctorresultTable > tbody');
data.map(function(instance) {
 const row = document.createElement('tr');
 tableContent.appendChild(row);
 instance.map(function(info) {
  const cell = document.createElement('td');
  cell.innerText = info;
  row.appendChild(cell);
 });
});

edited Oct 30, 2017 at 6:53

answered Oct 29, 2017 at 17:00

max

657 bronze badges

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

Comments

max · Accepted Answer · 2017-10-31 13:56:13Z

0

Using plain javascript (ES6):

const data = [["Subash Nisam",'test',"Medix Care","2017.03.02","9.30 am to 10.30 am"],["Subash Nisam",'test',"Medix Care","2017.03.02","3.30 to 5.30"]];

var tableContent = document.querySelector('#doctorresultTable > tbody');
data.map(instance => {
  const row = document.createElement('tr');
  tableContent.appendChild(row);
  instance.map(info => {
    const cell = document.createElement('td');
    cell.innerText = info;
    row.appendChild(cell);
  });
});

<table class="table table-bordered table-hover" id="doctorresultTable">
            <thead
                <tr>
                    <th>Doctor Name</th>
                    <th>Speciality</th>
                    <th>Hospital</th>
                    <th>Date</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

Though it would be easier to use some framework like Angular or React for rendering the view (React is preferable if you don't need to build an entire application).

edited Oct 31, 2017 at 13:56

max

657 bronze badges

answered Oct 29, 2017 at 13:30

Armen Vardanyan

3,3251 gold badge16 silver badges34 bronze badges

4 Comments

max Over a year ago

It's worked. can you suggest me a preferred tutorial or reference for improve my js knowledge.

max Over a year ago

I've problem when run with your code. when it runs console output show this---> Unexpected token > It gives error is here--> " data.map(instance = > {"

Armen Vardanyan Over a year ago

You can look into this, as your question was referring to DOM manipulations. And you also can take a look at how jQuery and React are used to manipulate the DOM, there are lots of online tutorials

Armen Vardanyan Over a year ago

What browser do you use? By the way, this is ES6, so you're probably going to need a transpiler (like Babel), or just replace the arrow functions with usual functions

Collectives™ on Stack Overflow

How to append JSON response output into html table using Javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related