Adding JSON data to Html table [duplicate]

Question

I have a json data and i have a html table, i want to add the json data to table this is how i try to get the json data , i use append to add the table data, since i am new to json parsing i tried my best can any one help ...

<!DOCTYPE html>
<html>

<head>
    <title>JSON Demo</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function StudentDetails() {
            var stu = [{
                    "stuname": "anbu",
                    "studep": "cs"
                },
                {
                    "stuname": "raj",
                    "studep": "Maths"
                },
                {
                    "stuname": "mani",
                    "studep": "science"
                }
            ]

            var tr = "";
            for (var i = 0; i < stu.length; i++) {

                tr = $('<tr/>');
                tr.append("<td>" + stu.stuname + "</td>");
                tr.append("<td>" + stu.studep + "</td>");
                $('#student').append(tr);

            }
        }
    </script>
</head>

<body>
    <input type="button" onClick="StudentDetails()" value="Student Table" />
    <div>
        <table id="student">
            <thead>
                <tr>
                    <th>Student Name</th>
                    <th>Student Department</th>
                </tr>
                <thead>
                    <tbody></tbody>
        </table>
    </div>

    <div id="showData"></div>
</body>

</html>

Alex S. · Accepted Answer · 2018-06-15 06:20:20Z

1

Add the index of Array to stu

tr.append("<td>" + stu[i].stuname + "</td>");
tr.append("<td>" + stu[i].studep + "</td>");

answered Jun 15, 2018 at 6:20

Alex S.

6424 silver badges6 bronze badges

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

Comments

Gabor · Accepted Answer · 2018-06-15 06:20:59Z

1

Try this:

tr.append("<td>" + stu[i]['stuname'] + "</td>");

answered Jun 15, 2018 at 6:20

Gabor

5725 silver badges14 bronze badges

Comments

Nandita Sharma · Accepted Answer · 2018-06-15 06:31:32Z

Change your code like this

for (var i = 0; i < stu.length; i++) {
        var tr = $("<tr>");

        tr.append("<td>" + stu[i].stuname + "</td>" + "<td>" + stu[i].studep + "</td>")

        $("#student tbody").append(tr);
      }
    }

<!DOCTYPE html>
<html>

<head>

  <title>JSON Demo</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <input type="button" onClick="StudentDetails()" value="Student Table" />
  <div>
    <table id="student">
      <thead>
        <tr>
          <th>Student Name</th>
          <th>Student Department</th>
        </tr>
        <thead>
          <tbody></tbody>
    </table>
  </div>


  <div id="showData"></div>
  <script>
    function StudentDetails() {
      var stu = [{
          "stuname": "anbu",
          "studep": "cs"
        },
        {
          "stuname": "raj",
          "studep": "Maths"
        },
        {
          "stuname": "mani",
          "studep": "science"
        }
      ]



      for (var i = 0; i < stu.length; i++) {
        var tr = $("<tr>");

        tr.append("<td>" + stu[i].stuname + "</td>" + "<td>" + stu[i].studep + "</td>")

        $("#student tbody").append(tr);
      }
    }
  </script>

</body>


</html>

Collectives™ on Stack Overflow

Adding JSON data to Html table [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related