Ajax append one row instead of array

Question

I have an ajax function that gets an array of data from the backend and when I try to append those data in the blade it only shows 1 row instead of an array of rows.

Issues

Only 1 row append by ajax
Select option will be empty when results return while I don't have any code to clear my select option.

Code

$(function() {
            // get cities
            $('#province').on('change', function(e) {
                e.preventDefault();
                $.ajaxSetup({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                });

                var hospitalId = $(this).val();

                $.ajax({
                    url: '{{ url('hospitals') }}/'+encodeURI(hospitalId),
                    dataType: "json",
                    type: 'GET',
                    success: function(data) {
                        console.log('dd: ', data.data);
                        if(data.data != null) {
                            $('.resError').hide();
                            $('.result').show();
                            // data to append
                            $.each(data.data, function(key, value) {
                                $('#code').html(value.code);
                                $('#name').html(value.name);
                                $('#type').html(value.type);
                                $('#class').html(value.class);
                                $('#beds').html(value.beds);
                                $('#owner').html(value.owner);
                                $('#province').html(value.province);
                                $('#city').html(value.city);
                                $('#address').html(value.address);
                            });
                        } else {
                            $('.resError').show();
                            $('.result').hide();
                            $('.resError').html('something went wrong, try again!');
                        }
                    },
                    error:function(err) {
                        $('.resError').show();
                        $('.resError').html('You need to select province!');
                        $('.result').hide();
                        $('#code').html('');
                        $('#name').html('');
                        $('#type').html('');
                        $('#class').html('');
                        $('#beds').html('');
                        $('#owner').html('');
                        $('#province').html('');
                        $('#city').html('');
                        $('#address').html('');
                    }
                });
            });
        });

results

Update

<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
    <table class="mb-3 table table-bordered table-hover">
        <tbody>
            <tr>
                <th width="50">Code</th>
                <td id="code"></td>
            </tr>
            <tr>
                <th width="50">Name</th>
                <td id="name"></td>
            </tr>
            <tr>
                <th width="50">Type</th>
                <td id="type"></td>
            </tr>
            <tr>
                <th width="50">Class</th>
                <td id="class"></td>
            </tr>
            <tr>
                <th width="50">Beds</th>
                <td id="beds"></td>
            </tr>
            <tr>
                <th width="50">Owner</th>
                <td id="owner"></td>
            </tr>
            <tr>
                <th width="50">Province</th>
                <td id="province"></td>
            </tr>
            <tr>
                <th width="50">City</th>
                <td id="city"></td>
            </tr>
            <tr>
                <th width="50">Address</th>
                <td id="address"></td>
            </tr>
        </tbody>
    </table>
</div>

$('#code').html(value.code); to $('#code').append(value.code); but u need to append root div not like this — Kamlesh Paul
– Kamlesh Paul, Commented Sep 23, 2020 at 5:16
may i see you html where you are appending so i can give you proper solution of this — Kamlesh Paul
– Kamlesh Paul, Commented Sep 23, 2020 at 5:18

Kamlesh Paul · Accepted Answer · 2020-09-23 05:26:16Z

1

in blade

<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
    <table class="mb-3 table table-bordered table-hover">
        <tbody id="body">
            
        </tbody>
    </table>
</div>

in javascript

$.each(data.data, function(key, value) {

    var element = `
    <tr>
            <th width="50">Code</th>
                <td id="code">${value.code}</td>
            </tr>
            <tr>
                <th width="50">Name</th>
                <td id="name">${value.name}</td>
            </tr>
            <tr>
                <th width="50">Type</th>
                <td id="type">${value.type}</td>
            </tr>
            <tr>
                <th width="50">Class</th>
                <td id="class">${value.class}</td>
            </tr>
            <tr>
                <th width="50">Beds</th>
                <td id="beds">${value.beds}</td>
            </tr>
            <tr>
                <th width="50">Owner</th>
                <td id="owner">${value.owner}</td>
            </tr>
            <tr>
                <th width="50">Province</th>
                <td id="province">${value.province}</td>
            </tr>
            <tr>
                <th width="50">City</th>
                <td id="city">${value.city}</td>
            </tr>
            <tr>
                <th width="50">Address</th>
                <td id="address">${value.address}</td>
            </tr>
    `;

    $('#body')append(element);

});

answered Sep 23, 2020 at 5:26

Kamlesh Paul

12.5k2 gold badges23 silver badges36 bronze badges

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

1 Comment

mafortis Over a year ago

thank you it does work however it doesn't include mb-3 class from <table... which was to separate tables, this only create rows inside 1 table

user404 · Accepted Answer · 2020-09-23 05:27:08Z

0

In your below code, you are appending value by the fieldId, that's why it is only appending only the last row(each iteration, the value is being updated in background) values are being set.

  $('#code').html(value.code);
    $('#name').html(value.name);
    $('#type').html(value.type);
    $('#class').html(value.class);
    $('#beds').html(value.beds);
    $('#owner').html(value.owner);
    $('#province').html(value.province);
    $('#city').html(value.city);
    $('#address').html(value.address);

So, to achieve your purpose, you have to append these as a complete row and insert into the table, not just appending fieldwise value but rowwise and insert that row into the table. I hope you get my point.

answered Sep 23, 2020 at 5:27

user404

2,0461 gold badge23 silver badges47 bronze badges

Comments

germanescobar · Accepted Answer · 2020-09-23 05:28:40Z

0

The problem is that you are always changing the same elements of the same table. I think you will need to append one table per row:

$.each(data.data, function(key, value) {
  $(".result").append('<table class="mb-3 table table-bordered table-hover">...</table>') 
});

However, you may want to use Handlebars or some other templating library to avoid creating a long string with the table.

answered Sep 23, 2020 at 5:28

germanescobar

8126 silver badges9 bronze badges

Collectives™ on Stack Overflow

Ajax append one row instead of array

Issues

Code

Update

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Issues

Code

Update

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related