JSFiddle - React, Tailwind, and code Playground

by Mamdouh Freelancer

HTML

<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
  <tbody class="connectedSortable ui-sortable">

  </tbody>
</table>

JavaScript

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() {

  updatetable(aajxresponse);

});

function updatetable(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;
  for (var i = 0; i < v.length; i++) {
    html += '<tr video-id="' + v[i].video_id + '"  class="newvideos exercises-add-table-content">\
                             <td>' + capitalise(v[i].video_name) + '</td>\n\
                            <td><a href="' + v[i].video_file + '" target="_blank">' + v[i].video_file.split('/').pop() + '</a></td>\n';
    var vd = v[i].Video_details;
    html += '<td>\n';
    for (var j = 0; j < vd.length; j++) {
      html += span.split("</span>").join(vd[j] + "</span>");
    }
    html += '</td>\n';
    html += '<td>\n\
<i class="fa fa-check"></i>\n\
</td>\n\
</tr>';
  }
  $("#videosfromtagstable tbody").html(html);
}

function capitalise(string) {
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}