json data to html table using jquery json data not correctly added to table only one column contains data

Question

i have json stu which contain student name and department i have a html table that contains stuent name and department as header and table id as student i used each to add data in table but the datas are adding in one column empty on another column i am new to json can anyone hel

<!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>
   <script>
    function StudentDetails() {
      var stu = [{
          "stuname": "anbu",
          "studep": "cs"
        },
        {
          "stuname": "raj",
          "studep": "Maths"
        },
        {
          "stuname": "mani",
          "studep": "science"
        }
      ] 

    var table='<student>';
    $.each(stu, function(i, item){
       table+='<tr><td>'+item.stuname+'</td></tr>';
       table+='<tr><td>'+item.studep+'</td></tr>';
        });
    $("#student").append(table);
    console.log(table);
        }
  </script>
</body>
</html>

Nandita Sharma · Accepted Answer · 2018-06-16 09:57:31Z

1

Your function has serious logical issues. I fixed that.

What you need to do was to append html to the tbody of the table, what you were doing was not the correct way of doing it.

<!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>
  <script>
    function StudentDetails() {
      var stu = [{
          "stuname": "anbu",
          "studep": "cs"
        },
        {
          "stuname": "raj",
          "studep": "Maths"
        },
        {
          "stuname": "mani",
          "studep": "science"
        }
      ]

      var table = '';
      $.each(stu, function(i, item) {
        table += '<tr><td>' + item.stuname + '</td><td>' + item.studep + '</td></tr>';
      });
      $("#student tbody").append(table);
      console.log(table);
    }
  </script>
</body>

</html>

edited Jun 16, 2018 at 9:57

answered Jun 16, 2018 at 9:53

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

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

5 Comments

Anburaj_N Over a year ago

mam i want the data to be displayed in table with heater like student name and student department below that i want anbu cs like that

Anburaj_N Over a year ago

thanks mam it worked i am new to json so trying new like for loop and each

Nandita Sharma Over a year ago

Did you ask such a ques earlier also ? related to table with similar data? cause i answered one ques yesterday also, with similar data

Anburaj_N Over a year ago

yes mam i did can u tell me which is best tutorial for jquery and json

Nandita Sharma Over a year ago

Read the basics from w3schools.com . Its good for beginners and practice as much as you can. You learn better with implementations.

Collectives™ on Stack Overflow

json data to html table using jquery json data not correctly added to table only one column contains data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related