jquery - How to create a Table with JSON in this case -
i have following json , creating table
{ "tag_video_details": [{ "video_id": "369", "tag_name": "three", "video_name": "test 001", "video_file": "xxx", "video_details": [ "one", "two", "three" ] }] }
while creating table , how can create td shown below inner array
<td> <span class="btn btn-sm btn-success btn-circle">one</span> <span class="btn btn-sm btn-success btn-circle">two</span> <span class="btn btn-sm btn-success btn-circle">three</span> </td>
i have hardcoded in fiddle
http://jsfiddle.net/cod7ceho/297/
function updatetable(aajxresponse) { var html = '<tr class="existingvideos">\ <th width="20%">id</th>\n\ <th width="35%">name</th>\n\ <th width="30%">course</th>\n\ <th width="15%">sert</th>\n\ </tr>'; (var = 0; < aajxresponse.tag_video_details.length; i++) { html += '<tr video-id="' + aajxresponse.tag_video_details[i].video_id + '" class="newvideos exercises-add-table-content">\ <td>' + capitalise(aajxresponse.tag_video_details[i].video_id) + '</td>\n\ <td>' + capitalise(aajxresponse.tag_video_details[i].video_name) + '</td>\n\ <td>\n\ <span class="btn btn-sm btn-success btn-circle">one</span>\n\ <span class="btn btn-sm btn-success btn-circle">two</span>\n\ <span class="btn btn-sm btn-success btn-circle">three</span>\n\ </td>\n\ <td>fduy</td>\n\ </tr>' } $("#videosfromtagstable tbody").html(html); }
this fiddle for
loop
and here pure jquery function $.each
loop
var aajxresponse = { "tag_video_details": [{ "video_id": "369", "tag_name": "three", "video_name": "test 001", "video_file": "xxx", "video_details": [ "one", "two", "three" ] }] } $(document).ready(function() { $("#videosfromtagstable tbody").updatetable(aajxresponse); }); jquery.fn.updatetable = function(aajxresponse) { var html = '<tr class="existingvideos">\ <th width="20%">id</th>\n\ <th width="35%">course</th>\n\ <th width="30%">name</th>\n\ <th width="15%">sert</th>\n\ </tr>'; var span = '<span class="btn btn-sm btn-success btn-circle"></span> '; var v = aajxresponse.tag_video_details; $.each(v, function(a, b) { html += '<tr video-id="' + b.video_id + '" class="newvideos exercises-add-table-content">\ <td>' + capitalise(b.video_name) + '</td>\n\ <td><a href="' + b.video_file + '" target="_blank">' + b.video_file.split('/').pop() + '</a></td>\n'; var vd = b.video_details; html += '<td>\n'; $.each(vd, function(x, j) { html += span.split("</span>").join(j + "</span>"); }); html += '</td>\n'; html += '<td>\n\ <i class="fa fa-check"></i>\n\ </td>\n\ </tr>'; }); $(this).html(html); } function capitalise(string) { return string.charat(0).touppercase() + string.slice(1).tolowercase(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="mytable1 table table-bordered table-hover" id="videosfromtagstable"> <tbody class="connectedsortable ui-sortable"> </tbody> </table>
Comments
Post a Comment