display multiple image into HTML table using jquery [duplicate]

Question

Hi I want to display multiple image into html table using jquery check my code for more clearification. In Console i get only image source as

<img src="uploads/">

    $.ajax({
         url : 'check.php',
        success: function (data) {
        data = $.parseJSON(data);
        var html = "";

        for(var a = 0; a < data.length; a++) {
            var firstName = data[a].first_name;
            var email = data[a].email;
            var dob = data[a].dob;
            var country = data[a].country;        
            var gender = data[a].gender;
            var meal= data[a].meal;
            var img = data[a].profile_pic;

          var array = img.split(',');
          for (var i = 0; i < array.length; i++) {
           var src = "uploads/"+ array[i];
              var img1 = '<img src='+ src +'>';
           }
            html += "<tr>";
                html += "<td>" + firstName + "</td>";
                html += "<td>" + email + "</td>";
                html += "<td>" + dob + "</td>";
                html += "<td>" + country + "</td>";
                html += "<td>" + gender + "</td>";
                html += "<td>" + meal + "</td>";
                html += "<td>" + img1 + "</td>";

            html += "</tr>";
           document.getElementById("data").innerHTML += html;
          }
        },

==> find screen shot on this link imgur.com/a/FOOcV9a

Aamir Mansuri
– Aamir Mansuri

2019-05-15 04:43:32 +00:00
Commented May 15, 2019 at 4:43 — Aamir Mansuri
– Aamir Mansuri, Commented May 15, 2019 at 4:43

Syed mohamed aladeen · Accepted Answer · 2019-05-15 04:43:44Z

1

Just move your img content inside for loop.

$.ajax({
         url : 'check.php',
        success: function (data) {
        data = $.parseJSON(data);
        var html = "";

        for(var a = 0; a < data.length; a++) {
            var firstName = data[a].first_name;
            var email = data[a].email;
            var dob = data[a].dob;
            var country = data[a].country;        
            var gender = data[a].gender;
            var meal= data[a].meal;
            var img = data[a].profile_pic;

          var array = img.split(',');
          html += "<tr>";
                html += "<td>" + firstName + "</td>";
                html += "<td>" + email + "</td>";
                html += "<td>" + dob + "</td>";
                html += "<td>" + country + "</td>";
                html += "<td>" + gender + "</td>";
                html += "<td>" + meal + "</td>";
                html += "<td>";
          for (var i = 0; i < array.length; i++) {
           var src = "uploads/"+ array[i];
              var img1 = '<img src='+ src +'>';
              html += img1
           }
                html += "</td>";

            html += "</tr>";
           document.getElementById("data").innerHTML += html;
          }
        },

answered May 15, 2019 at 4:43

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aamir Mansuri Over a year ago

Sukriya Mere Bhai.. Ramzaan Mubarak

Aamir Mansuri Over a year ago

code working correctly

Aamir Mansuri Over a year ago

this is my second post on stack overflow. how can i accept your answer just navigate me.

Collectives™ on Stack Overflow

display multiple image into HTML table using jquery [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related