CODEWITHSUNDEEP
jqueryhtmljsonajaxasp.net-ajax
TechGuy
TechGuy

Reputation: 4570

Jquery / Html table shows Last row only

I have a jQuery / Html table and in this table only last record shows. If I have 2 items but still shows the last row only.

    <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                            <div class="form-group">
                                NEWSID
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <div class="form-group">
                               Description
                            </div>
                        </div>


                    <div class="row" id="resultTbl">

                </div>
        </div>


 $.ajax({
    url: $("#getNewsDetails").val(),
    type: "POST",
    data: { NewsId: $("#NewsId").val() },
    dataType: "json",
    success: function (_result) {

        $.each(_result.NewsDetails, function (index, value) {

            let trHTML = '';

            trHTML += '<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Id+ '</td>';
            trHTML += '</div>';
            trHTML += '</div>';

            trHTML += '<div class="col-lg-3 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Description + '</td>';
            trHTML += '</div>';
            trHTML += '</div>';

            $('#resultTbl').html(trHTML);
        });

    },
    error: function (jqXHR) {

    }
});

Upvotes: 0

Views: 111

Answers (2)

RIYAJ MULLA
RIYAJ MULLA

Reputation: 61

$('#resultTbl').html(trHTML);

put this line in outside the loop. it will fix it

Upvotes: 1

BInjal Patel
BInjal Patel

Reputation: 331

Update your jquery code. You need to set html code after each loop is completed.

$.ajax({
    url: $("#getNewsDetails").val(),
    type: "POST",
    data: { NewsId: $("#NewsId").val() },
    dataType: "json",
    success: function (_result) {

        $.each(_result.NewsDetails, function (index, value) {

            let trHTML = '';

            trHTML += '<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Id+ '</td>';
            trHTML += '</div>';
            trHTML += '</div>';

            trHTML += '<div class="col-lg-3 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Description + '</td>';
            trHTML += '</div>';
            trHTML += '</div>';


        });
        $('#resultTbl').html(trHTML);
    },
    error: function (jqXHR) {

    }
});

Upvotes: 1

Related Questions