Here's the structure of my JSON data:
{
"comment_ds": [
{
"c_user": [
"Alice",
"Alice",
"Alice",
"Alice",
"Alice"
],
"c_user_img": [
"/media/accounts/1234567890/1234567890.jpg",
"/media/accounts/1234567890/1234567890.jpg",
"/media/accounts/1234567890/1234567890.jpg",
"/media/accounts/1234567890/1234567890.jpg",
"/media/accounts/1234567890/1234567890.jpg"
],
"c_content": [
"interesting",
"brilliant",
"amazing",
"fantastic",
"superb"
]
}
]
}
I am extracting and rendering this data from an Ajax response using the following code snippet:
success: function(data) {
comm_data = data['comment_ds'][0];
var i = 0;
Object.entries(comm_data).forEach(([key, value]) => {
if (i < value.length){
c_user = comm_data["c_user"][i];
c_content = comm_data["c_content"][i];
c_user_img = comm_data["c_user_img"][i];
comment = document.createElement('tr');
comment.setAttribute('class','comment')
$(comment).html(`
<th class="comm_th_1"><img class="comm_user_image" src="${c_user_img}"><a class="comm_user">${c_user}</a></th>
<th class="comm_th_2">${c_content}</th>
<th class="comm_th_3"></th>`);
$('.comm_cont').append(comment);
}
i+=1;
});
}
}
Although it successfully displays the first three comments, it abruptly stops after that.
Even though value.length returns 5 when I console.log it, the incremental variable i seems to halt at 3.
Your input and suggestions are greatly appreciated.