How to append multiple objects in array with jquery each() method -


there array called employeedetails , in array there 3 objects. want append 3 objects , properties table using jquery's each() method.

i trying, it's not working. did for loop , created when used each() not able view it. want done through each() method. please me , correct me wrong.

$(document).ready(function() {    var employeedetails = [{      srno: 1,      doj: '20 april 2011',      dob: '11 june 1987',      name: 'aniket paste',      designation: 'web designer',      salary: 30000,      address: 'borivali east'    },{      srno: 2,      doj: '10 april 2011',      dob: '15 may 1987',      name: 'amey sawant',      designation: 'ui developerr',      salary: 50000,      address: 'borivali east'    },{      srno: 3,      doj: '21 june 2014',      dob: '11 december 1989',      name: 'mahesh parab',      designation: 'frontend developer',      salary: 45000,      address: 'dahisar east'    }]      $(".btn").click(function() {      // for(i = 0; < employeedetails.length; i++){      //   var data = "<tr><td>" + employeedetails[i].srno +       //     "</td><td>" + employeedetails[i].doj +       //     "</td><td>" + employeedetails[i].dob +       //     "</td><td>" + employeedetails[i].name +       //     "</td><td>" + employeedetails[i].designation +       //     "</td><td>" + employeedetails[i].salary +       //     "</td><td>" + employeedetails[i].address +       //     "</td></tr>";      //   $('table').append(data);      // }        $('table').each(function() {        $('table').append(employeedetails);      });    });  });
<link href="https://fonts.googleapis.com/css?family=droid+sans" rel="stylesheet">  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <button class="btn btn-default mb15 mt15">add data</button>    <table class="table table-bordered">    <tr>      <th>sr.no.</th>      <th>d.o.j</th>      <th>d.o.b</th>      <th>employee name</th>      <th>designation</th>      <th>salary</th>      <th>address</th>    </tr>    <!--     <tr>      <td>01</td>      <td>24.04.2012</td>      <td>20.04.1988</td>      <td>aniket paste</td>      <td>web designer</td>      <td>30000</td>      <td>borivali east</td>    </tr>    -->  </table>    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

employeedetails.foreach(function(item){    $('<tr>', {      html: '<td>'+item.srno'</td>'+....other fields    }).appendto(table); }); 

you may use construction this, or loop


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -