problem recovering data from an API

For the problem you are having, it is not on your side.

From the provided link:

For example the server might respond with 404 Not Found indicating that the file requested is not available at the given URL, or 500 Internal Error which indicates that the server encountered an error while processing the request.

What this tells you is that most probably the id of the object you are looking for does not exist.

Follow the steps in the Diagnosis to be sure.

thank you very much for your answer. the question is how i can recover several tables but i have the problem just with one table (the problem is that it is the most important table).

Sounds like you may be hitting an "API rate-limit" and getting denied API response at some point.

It would be helpful if you:

1. could track down the specific error (network-console?) or maybe your server logs, when it happens?
2. tell us which API you're trying to hit?

Tough to diagnose with no information

hello, thank you for your reaction, I use the London Theater API, and currently I have a 2nd problem and the problem is that I can not save this information in the database. and what is special is that I manage to retrieve and save the other tables without worries. I have the delivery of the project on Thursday and I am lost. if you need more info do not hesitate to tell me. thank you very much.

/*****************here is the code or the problem (in my opinion) ****************************/

@extends('back.layouts.app')

@section('datatableCss')

@endsection

@section('styles')

@endsection

@section('content')

@component('back.components.plain')

@slot('titlePlain')

The Main Configuration Of the web application

@endslot

@slot('sectionPlain')

<table class="table table-bordered table-striped" id="table">
    <thead>
        <tr>
            <th>id</th>
            
          <!--  <th>Image</th>   -->
            <th>img_url</th>
            <th>name</th>
            <th>Description</th>
            <th>Location</th>
            <th>price</th>
            <th>Confirm / Delete</th>
        </tr>
    </thead>
</table>

@endslot

@slot('footerPlain')

@endslot

@endcomponent

@endsection

@section('datatableScript')

@endsection

@section('scripts')

$(function() {

window.exist = JSON.parse('{{ $exist }}');

//rendering table $('#table').DataTable({ //enjoyer un ajax request avec headers ymkan ngoulk titles mo9dimat bach y3raf ach baghin 7na

    ajax: {
        timeout: 600000,
        //link to get events
        "url": "https://api-sandbox.londontheatredirect.com/rest/v2/Events",   
        //header bach ngolou lou bghina JSON   
        "contentType": "application/json",
        "beforeSend" : function(xhr) {
            //header qui contien lkey
            //api key
          xhr.setRequestHeader('Api-Key','gesjdrynjgev8gqd2rkb6pkz');
        },
        //'object qui contient les infos'
        dataSrc: 'Events',
    },

   

    columns: [
    //les proprieté de lobject qu'on va mettre dans le tableau
        { data: 'EventId'},

        { data: 'MainImageUrl',
        render: function ( data, type, row ) {
            return '<img src="'+data+'" width="60px" height="40px" />';
            //return 'Img Indisponible';
        }

        },
        // { data: 'MainImageUrl'},
        { data: 'Name'},
        { data: 'Description'},
        //"VenueId": 85,//Location Id
        { data: 'VenueId'},
        //Mochkila khra bach njabdo limage khasa ndakhlo l array nkhaliwha mn ba3d
        // bookable hankhaliwha dima true 7it ma7do t3lan 3lih ya3ni bbokable
        { data: 'OfferPrice'},
        { data: 'EventId',
        render: function ( data, type, row ) {
                if( $.inArray( Number( data ) , window.exist )  == -1 ){
                    return '<a  href="#" class="btn btn-success btn-confirm" id="'+data+'">Confirm</a>';


                }else{
      
                    return '<a  href="#" class="btn btn-danger btn-delete" id="'+data+'">Delete</a>';
                }

            }

        }
    ]
});

});

$( document ).ready(function() {

$('#table').on('click','.btn-confirm', function(e){ e.preventDefault(); // btn-confirm id var id= $(this).attr('id');

var id_selector = $(this);

id_selector.attr('disabled', true);


var slug_parent = id_selector.parent().prev();

var slug = slug_parent.text();

var poster_url_parent = slug_parent.prev();

var poster_url = poster_url_parent.text();

var location_id_parent = poster_url_parent.prev();

var location_id = location_id_parent.text();

var locality_id_parent = location_id_parent.prev();

var locality_id = locality_id_parent.text();

var price_parent = locality_id_parent.prev();

var price = price_parent.text();


   axios.post('/shows-post/'+id,{
    //csrf token
    headers: {


                        'X-CSRF-TOKEN': $('#csrf-token').attr('content')
                        },
    id: id,
    slug: slug,
            location_id:location_id,
    poster_url:poster_url,
    price: price
    

}).then(function( response ){
    //if good
    id_selector.attr('disabled', false);
    console.log( response.data);
    id_selector.removeClass('btn-success btn-confirm');
    id_selector.addClass('btn-danger btn-delete');
    id_selector.text('Delete');

}).catch(function( error ){
    //if error
    alert('error');
    console.log( error);
    id_selector.attr('disabled', false);

});

});

/***********************************/

$('#table').on('click','.btn-delete', function(e){ e.preventDefault(); // btn-confirm id var id= $(this).attr('id');

var id_selector = $(this);

id_selector.attr('disabled', true);

/* { data: 'Name'}, //Designation { data: 'Info'}, { data: 'Address'}, //localityId { data: 'City'}, { data: 'Postcode'}, //website { data: 'Email'}, { data: 'Telephone'}, { data: 'VenueId',*/ // debugger;

axios.delete('/shows-delete/'+id,{
    //csrf token
    headers: {


                        'X-CSRF-TOKEN': $('#csrf-token').attr('content')
                        } 

}).then(function( response ){
    //if good
    id_selector.attr('disabled', false);
    console.log( response.data);
    id_selector.removeClass('btn-danger btn-delete');
    id_selector.addClass('btn-success btn-confirm');
    id_selector.text('Confirm');

}).catch(function( error ){
    //if error
    alert('error');
    console.log( error);
    id_selector.attr('disabled', false);

});

});

});

@endsection

A major issue I see here is that you're tying the function of your page to the response of their API. In my first test, it took almost 22 sec to get a response payload - which finally did come through.

There is no way you can make your site depend on a response like this. You'll have to use server-side caching and update the data on an intermittent basis.

Then you can store the response data from the API - and render from your own database the Events data - making your site useful.

So I would strongly recommend you move the API data acquisition to the server-side and then just render either the cached data from the API, or your own database stored version, on your own front end.