UnKnown UnKnown - 28 days ago 4
jQuery Question

How to create a name with as desired while reading for loop

I am reading a JSON and construction a table from it ,
during this process i am reading an inner array "Video_details"

While reading the inner array i need to take only first 3 elements and if there are more
elements i need to put ... (3 dots )

so that it looks like (3 dots after one two three)

Test 001 xxx one two three ... SERTVal


var aajxresponse = {
"tag_video_details": [{
"video_id": "369",
"tag_name": "three",
"video_name": "test 001",
"video_file": "xxx",
"Video_details": [
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"ten"
]

}]
}

$(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++) {
if(j<3)
{
html += span.split("</span>").join(vd[j] + "</span>");
}
}
html += '</td>\n';
html += '<td>\n\
<i class="fa fa-check">SERTVal</i>\n\
</td>\n\
</tr>';
}
$("#videosfromtagstable tbody").html(html);
}


http://jsfiddle.net/cod7ceho/326/

Answer

Where you edit that text, simply add the condition for when the count is greater than 3. So where you have this:

if(j < 3) {
    html += span.split("</span>").join(vd[j] + "</span>");
}

Add this:

else {
    html += span.split("</span>").join('...' + "</span>");
    break;
}

The break is there so that the condition happens only once, rather than for every additional element in the loop. Once the '...' is added the loop should exit because the remaining elements aren't needed.

There are, I imagine, a number of ways to accomplish the same thing. This suggestion is simply in keeping with the logic you already have, which you could refactor all you like once it's working and tested.