JS - 呈现所有评论

Question

I have json data that looks like this:

{
    "comment_ds": [
        {
            "c_user": [
                "Bob",
                "Bob",
                "Bob",
                "Bob",
                "Bob"
            ],
            "c_user_img": [
                "/media/accounts/1809094310/1809094310.jpg",
                "/media/accounts/1809094310/1809094310.jpg",
                "/media/accounts/1809094310/1809094310.jpg",
                "/media/accounts/1809094310/1809094310.jpg",
                "/media/accounts/1809094310/1809094310.jpg"
            ],
            "c_content": [
                "nice",
                "awesome",
                "very cool",
                "great",
                "perfect"
            ]
        }
    ]
}

I am using this part of an ajax response to render the data:

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;
        });
        }
      }

It works for the first 3 comments but then stops.

When I console.log value.length , I get 5, but i stops incrementing at 3.

Thank you for any suggestions

Answer 1

You can make a loop via c_user property using forEach method. This method supports for indexer.

Since c_user , c_user_img and c_content have the same size, you can use that index in order to assign another values: c_user_img c_content :

 var data = { "comment_ds": [ { "c_user": [ "Bob", "Bob", "Bob", "Bob", "Bob" ], "c_user_img": [ "/media/accounts/1809094310/1809094310.jpg", "/media/accounts/1809094310/1809094310.jpg", "/media/accounts/1809094310/1809094310.jpg", "/media/accounts/1809094310/1809094310.jpg", "/media/accounts/1809094310/1809094310.jpg" ], "c_content": [ "nice", "awesome", "very cool", "great", "perfect" ] } ] }; comm_arr = data['comment_ds']; comm_data = comm_arr[0]; comm_data.c_user.forEach(function (user, index) { img = comm_data.c_user_img[index]; content = comm_data.c_content[index]; console.log(user, img, content); });