How to show ajax response data into php variable inside a foreach loop

Question

I have a view where some data is shown in a table with filtering option. When I choose an option of dropdown from the filtering part I want only table part will be refreshed and shown the updated data. I have successfully filtered data from database using ajax. But can't show the filtered data (ajax response) in the table.

Filtering and table part of view.php

<div class="col-lg-8">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"> Search </h3>
        </div>
        <div class="panel-body">
            <div class=" col-md-5">
                <select class="form-control selectpicker searchField" id="selectTitleId_search">

                    <option value="">Select Title</option>

                    @foreach($titleData as $value)
                        <option value="{{$value->id}}">{{$value->name}}</option>
                    @endforeach

                </select>
            </div>
            <div class="col-md-5">
                <input type="text" id="datepicker" class="form-control searchField" placeholder="Select date">
                <span class="add-on"><i class="icon-th"></i></span>
            </div>  
            <div class="col-md-2">
                <button type="button" class="btn btn-info" id="searchButton">
                    Search
                </button>
            </div>      
        </div>
    </div>
</div>

<br/>

<div class="col-lg-9">
    <div class="panel panel-info" >
        <div class="panel-heading" style="padding:5px" >
            <div class="panel-title">
                <h3> Daily Income Report</h3>                   
            </div>  
        </div>
        <div class="panel-body" id="report">

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Title Name</th>
                        <th>Amount</th>
                        <th>Date & Time</th>
                    </tr>                       
                </thead>
                <tbody style="font-size: 1.3em;">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-info pull-right addItem" data-toggle="modal" data-target="#exampleModal">
                      Add
                    </button>

                @foreach($data as $value)
                    <tr class="itemList" data-toggle="modal" data-target="#exampleModal">                       
                        <input type="hidden" id="id" value="{{ $value->id }}">  
                        <input type="hidden" id="titleId" value="{{ $value->title_id }}">  
                        <td id="title_name" >                  

                            {{ $value->name }}

                        </td>
                        <td id="transaction_amount" >

                            {{ $value->amount }}

                        </td>
                        <td id="transaction_date">

                            {{ $value->created_at }}

                        </td>

                    </tr>
                @endforeach



              </tbody>
            </table>

            {{ $data->links() }}

        </div>
    </div>
</div>

ajax part of view.php

$(".searchField").change(function() 
{
    var title_id = $("#selectTitleId_search").val();
    var date = $('#datepicker').val();
    var token = $('input[name=_token]').val();
    var report_type_id = 1;
    // console.log(date);
    $.ajax({
        url:"/filter",
        type: 'POST',
        data: {_token :token, title_id : title_id, date : date, report_type_id : report_type_id},
        success:function(msg)
        {
            console.log(msg);
            $(".itemList").append(msg);
        }
    });
});

Now how can I send the ajax response data to foreach() loop of the table to show the filtered data

Answer 1

Use foreach loop in ajax success function and append data to list

$.ajax({
    url:"/filter",
    type: 'POST',
    data: {_token :token, title_id : title_id, date : date, report_type_id : report_type_id},
    success:function(msg){
        console.log(msg);
        msg.forEach(function(item) {
            // do something with `item`
            $(".itemList").append(item);
        });
    }
});