Populate table

Populate table from json response

HTML

<table class="table">
    <thead>
        <tr>
            <td>Sno</td>
            <td>Reg No</td>
            <td>Student Name</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<button class="btn-populate-values">Populate values</button>

JavaScript

$(function () {
    $(".btn-populate-values").click(function () {
        var sampleData = {
            "student": [{
                "sn_no": "001",
                    "r_no": "R001",
                    "s_name": "Student 1"
            }, {
                "sn_no": "002",
                    "r_no": "R002",
                    "s_name": "Student 2"
            }, {
                "sn_no": "003",
                    "r_no": "R003",
                    "s_name": "Student 3"
            }, {
                "sn_no": "004",
                    "r_no": "R004",
                    "s_name": "Student 4"
            }, {
                "sn_no": "005",
                    "r_no": "R005",
                    "s_name": "Student 5"
            }, {
                "sn_no": "006",
                    "r_no": "R006",
                    "s_name": "Student 6"
            }, {
                "sn_no": "007",
                    "r_no": "R007",
                    "s_name": "Student 7"
            }, {
                "sn_no": "008",
                    "r_no": "R008",
                    "s_name": "Student 8"
            }, {
                "sn_no": "009",
                    "r_no": "R009",
                    "s_name": "Student 9"
            }, {
                "sn_no": "0010",
                    "r_no": "R0010",
                    "s_name": "Student 10"
            }, ]
        };
        var table = $(".table tbody");
        table.html($.map(sampleData.student, function(student) {
            return [
                "<tr>",
                "<td>", student.sn_no, "</td>",
                "<td>", student.r_no, "</td>",
                "<td>", student.s_name, "</td>",
                "</tr>"
            ].join('')
        }).join(''));
    });
});