Play date returned from ajax in php foreach

Question

I have an ajax search that picks up some data based on what was searched, how do I play this 'date' coming from an ajax in a foreach in php ?

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: 'get',
    url: '{{route('
    videos.index ')}}',
    data: {
        search: $valor
    },
    // contentType: "application/json; charset=utf-8",
    datatype: "text",
    beforeSend: function() {

        $("#resultado").html("Carregando...");
        // document.getElementById('paginate').style.display = 'none';
    },
    success: function(data) {
        if ($.trim(data)) {
            console.log(data);
            $('#resultado').append(data);
            $('#last_videos').html(" ");
            document.getElementById('create_video').style.display = 'none';
            document.getElementById('paginate_total').style.display = 'none';
            document.getElementById('paginate_ajax').style.display = 'block';

        } else {
            $('#resultado').html("Video não encontrado no banco de dados ou URL invalida");
            $('#last_videos').html(" ");
            // document.getElementById('create_wistia').style.display = 'block';
        }
    },
    error: function(data) {
        $('#last_videos').html(" ");
        $('#resultado').html("Erro ao pesquisar...");
    }
});

I want to take the result of Success ajax and play in this foreach

<div id ="last_videos">
    @foreach($data as $video)
    <div class="sc-box " id="{{ $video->id }}">
        <div class="row">
            <div class="col-md-12 text-left">
                <span class="sc-code"><big>{{ $video->code_video }}</big></span>
                <a href="javascript:void(0);" class="cinza"><span class="fa fa-lock"></span></a>
                (<span class="fa fa-clock-o"></span> {{ $video->duration }})
                <a href="{{ route('videos.edit', $video->id) }}" class="fa fa-edit"></a><br />
                <b>{{ $video->title }}</b> 
                <br /><br />
            </div>
        </div>
        <div class="row">
            <a href="{{ route('videos.edit', $video->id) }}">
            @if ($video->image)
            <img style='width: 200px; height: 250px' src="{{ URL::to('/uploads/' . $video->image) }}"  class="sc-class-gallery img-responsive">
            @elseif ($video->thumbnail)
            <img style='width: 200px; height: 250px' src="{{ $video->thumbnail }}"  class="sc-class-gallery img-responsive">
            @endif
            </a>
        </div>
    </div>
    @endforeach
    @else
    <img src="{{ URL::asset('images/no-video.png') }}" width="250">
    <h3>{{ trans('field.video_index') }}</h3>
    <p>{!! trans('field.text_video_index') !!}</p>
    @endif
</div>

Answer 1

Well, you will need to inflate this data in html to then play on your page, one of the ways, following your template is creating a string template:

var templateVideos = `<div class="sc-box " id="%%id%%">
    <div class="row">
        <div class="col-md-12 text-left">
            <span class="sc-code"><big>%%code_video%%</big></span>
            <a href="javascript:void(0);" class="cinza"><span class="fa fa-lock"></span></a>
            (<span class="fa fa-clock-o"></span>%%duration%%)
            <a href="%%routeEditVideoId%%" class="fa fa-edit"></a><br />
            <b>%%title%%</b> 
            <br /><br />
        </div>
    </div>
    <div class="row">
        <a href="%%routeEditVideoId%%">

        <img style='width: 200px; height: 250px' src="%%thumbnail_url%%"  class="sc-class-gallery img-responsive">
        </a>
    </div>
</div>`;
function inflate(data) {
  var inflado = templateVideos;
  inflado = inflado.replace(/%%id%%/g, data.id);
  inflado = inflado.replace(/%%title%%/g, data.title);
  // e vai substituindo tudo utilizando regExp na sua logica
  return inflado;
}

And then use in your successful callback

success: function(data) {
    var content = parseData(data);
    if (data.length != 0) {
        for (var i = 0; i < data.length; i++){
          var videoIteracao = inflate(data[i])
          $("last_videos").append(videoIteracao);
        }
        console.log(data);
        $('#resultado').append(data);
        $('#last_videos').html(" ");
        document.getElementById('create_video').style.display = 'none';
        document.getElementById('paginate_total').style.display = 'none';
        document.getElementById('paginate_ajax').style.display = 'block';

    } else {
        $('#resultado').html("Video não encontrado no banco de dados ou URL invalida");
        $('#last_videos').html(" ");
        // document.getElementById('create_wistia').style.display = 'block';
    }
}

Answer 2

Try to take this JS return and give a json_decode, then you transform to php object and can manipulate in your foreach.