Show JSON data on loop in div using jQuery and PHP

Question

I am using jQuery and JSON to get data from database

$("#openNotification").on('click', function(e)
{
    ID = "a";
    $.ajax(
    {
        url: "notificationDetail",
        type: "POST",
        data:
        {
            designationID: ID
        },
        dataType: "JSON",
        success: function (jsonStr)
        {
            $(".processingNotification").hide();

            var jSonLength = jsonStr.length;

            for (var i=0; i<jSonLength; i++)
            {
                var userAvatar = jsonStr[0].userAvatar;

                var newrow = "<div class='subNotification'><img src='assets/img/avatar/"+userAvatar+"'/></div>";


            }


            $(".opened_page").html(newrow);
        }
    });
});

HTML

<div class="opened_page"></div>

When I click #openNotification I can see the jSon data from PHP

But when I want to display the data to .opened_page it only show 1 data.

Kapila Perera · Accepted Answer · 2017-03-17 06:47:26Z

3

you are replacing with new value, code should be

var newrow = '';
for (var i=0; i<jSonLength; i++)
{
     var userAvatar = jsonStr[0].userAvatar;
     newrow += "<div class='subNotification'><img src='assets/img/avatar/"+userAvatar+"'/></div>";
}

answered Mar 17, 2017 at 6:47

Kapila Perera

8681 gold badge14 silver badges25 bronze badges

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

Comments

Alok · Accepted Answer · 2017-03-17 07:26:53Z

You can also use jQuery append() function here.

For eg.

for(var i = 0; i < jSonLength; i++){
   var userAvatar = jsonStr[i].userAvatar;
   $(".opened_page").append("<div class='subNotification'><img src='assets/img/avatar/"+userAvatar+"'/></div>");
}

So your final code would be like,

$("#openNotification").on('click', function(e){
    ID = "a";
    $.ajax({
        url: "notificationDetail",
        type: "POST",
        data: {
            designationID: ID
        },
        dataType: "JSON",
        success: function (jsonStr){
            $(".processingNotification").hide();
            var jSonLength = jsonStr.length;

            for(var i = 0; i < jSonLength; i++){
                var userAvatar = jsonStr[i].userAvatar;
                $(".opened_page").append("<div class='subNotification'><img src='assets/img/avatar/"+userAvatar+"'/></div>");
            }
        }
    });
});

Collectives™ on Stack Overflow

Show JSON data on loop in div using jQuery and PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related