i trying show data 5 rows of database (mysql) rows of table using on success of jquery ajax call. data in json format.
issue: not able figure out of rows. can 1 row console showed me rows in json format.
$.ajax({ url: '<?php echo base_url('ads/select_post'); ?>', data: {}, datatype: "json", cache: false, success: function (data) { $.each(data, function (i, val) { console.log(val.name); $("#name").html(val.name); $("#price").html(val.price); $("#addr").html(val.addr); $("#des").html(val.des); $("#viewed").html(val.viewed); $("#status").html(val.status); }); } }); console output:
[{"name":"dfasdfas","price":"0","addr":"dfasdfas","des":"sadfdfasdfasdf","viewed":"0","img":"","status" :"1"},{"name":"heng","price":"0","addr":" dflkas;df","des":"asdfasdf" ,"viewed":"0","img":"","status":"1"},{"name":"asddasda","price":"0","addr":"asdadasd","des":"asdasdasd" ,"viewed":"0","img":"","status":"1"},{"name":"asdfas","price":"0","addr":"fasdfas","des":"dfasdf","viewed" :"0","img":"","status":"1"},{"name":"asdf","price":"0","addr":"asdfasdfas","des":"asdfasdfasdf","viewed" :"0","img":"","status":"1"}] html of table sending data to,
<tbody id="items"> <tr> <td>1</td> <td><a><div id="name"></div> </a></td> <td><a><div id="price"></div> </a></td> <td><a><div id"addr"></div></a></td> <td><div id="des"></div> </td> <td><a><div id="viewed"></div></a></td> <td><a><div id="status"></div></a></td> </tr> please advise.
lots of answers, since i've created example i'll post too. if nothing else might give you, or else, alternative solution. i'm using classes instead of id's, , keep original structure.
since accepted answer should mention why code failed:
each loop continually overwriting contents of table row data, instead of creating new rows. thing needed fixing had given columns id's, , cannot stay (as were) if want repeat rows, since id's within page must unique.
there many methods create new elements. chose clone() figure have row header used clone/copy. added unique id attribute each tr. these not used in current implementation below, might have reference later in project.
var data = [{"name":"dfasdfas","price":"0","addr":"dfasdfas","des":"sadfdfasdfasdf","viewed":"0","img":"","status" :"1"},{"name":"heng","price":"0","addr":" dflkas;df","des":"asdfasfasdfasdfasdfasdfasfasdfasdfasdfas" ,"viewed":"0","img":"","status":"1"},{"name":"asddasda","price":"0","addr":"asdadasd","des":"asdasdasd" ,"viewed":"0","img":"","status":"1"},{"name":"asdfas","price":"0","addr":"fasdfas","des":"dfasdf","viewed" :"0","img":"","status":"1"},{"name":"asdf","price":"0","addr":"asdfasdfas","des":"asdfasdfasdf","viewed" :"0","img":"","status":"1"}]; //place within ajax success $.each(data, function(i, val) { var currrow = $("#tr0").clone().appendto($('#items')).attr('id','tr' + (i + 1)); currrow.find('td:eq(0)').html(i + 1); currrow.find('.name').html(val.name); currrow.find('.price').html(val.price); currrow.find('.addr').html(val.addr); currrow.find('.des').html(val.des); currrow.find('.viewed').html(val.viewed); currrow.find('.status').html(val.status); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody id="items"> <tr id="tr0"> <td>id</td> <td><a><div class="name">name</div></a></td> <td><a><div class="price">price</div></a></td> <td><a><div class="addr">addr</div></a></td> <td><div class="des">des</div></td> <td><a><div class="viewed">viewed</div></a></td> <td><a><div class="status">status</div></a></td> </tr> </tbody> </table>
Comments
Post a Comment