CODEWITHSUNDEEP
javascriptjqueryhtml
Edwin Bossman
Edwin Bossman

Reputation: 91

Not able to display all rows dynamically

i have 7 team member and im just able to display 1 of them in id demo, how can i display all my team members? PFB HTML code and javascript one what im using for the same:

<div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
                <div class="popup" onclick="myFunction()"><h6>My team</h6>
                    <span class="popuptext" id="myPopup">My team members:<br><h7 id="demo"></h7><br></span>
                </div>
        </div>
    </div>
        <ol class="breadcrumb"></ol>

        <script>
            // When the user clicks on <div>, open the popup
            function myFunction() {
            var popup = document.getElementById("myPopup");
            popup.classList.toggle("show");
            var data1 = "TEAMSEARCH";
            //alert(data1);             
            $.ajax({
                url : 'TeamAssignment',
                type : 'POST',
                data : {
                    data1 : data1
                },
                success : function(result) {
                     var memberList = $.parseJSON(result);
                     //alert ( "Returned rows " + memberList.length);
                     for (var i = 0; i < memberList.length; i++)
                        {
                           console.log(memberList[i].fullName );
                           document.getElementById("demo").innerHTML = memberList[i].fullName;
                       }
                }
            });
            }
        </script>

Upvotes: 0

Views: 54

Answers (3)

karthik reddy
karthik reddy

Reputation: 479

You can also use below one:

var memberList = $.parseJSON(result); $("#demo").html('') // here just make empty innetHTML for(var member of memberList) $("#demo").append('<li>' + member.fullName + '</li>') // here appending html string of each member

Upvotes: 1

Konstantinos Poimenidis
Konstantinos Poimenidis

Reputation: 94

You repeatedly overwrite the demo innerHTML. You should make the assignment right after the for loop.

try something like this:

var members = '';
for (var i = 0; i < memberList.length; i++) {
    console.log(memberList[i].fullName );
    members += memberList[i].fullName;
}
document.getElementById("demo").innerHTML = members;

Upvotes: 1

ktilcu
ktilcu

Reputation: 3128

document.getElementById("demo").innerHTML = memberList[i].fullName

Each iteration of the loop rewrites the entire innerHTML of demo. You probably want something like document.getElementById("demo").innerHTML += '<li>' + memberList[i].fullName + '</li>'

the += is the actually important part.

Upvotes: 2

Related Questions