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
Post a Comment