mercredi 16 novembre 2022

Tom-Select options not loading while using JavaScript's native Fetch API in this example to retrieve remote data from a route

I am attempting to load tom-select options not loading while using JavaScript's native Fetch API in this example to retrieve remote data from a route. However, JS below fetches a json array of 15527 items but won't show on the options

The Select element...

The JS...

var new_opd1 = "";

 new TomSelect('#select-repo',{
    valueField: 'url',
    labelField: 'icd_name',
    searchField: 'icd_name',
    // fetch remote data
    load: function(query, callback) {
        var url =new_opd1+'?q='+query ;
       // console.log(url)
        fetch(url)
            .then(response => response.json())
            .then(json => {
                //console.log(json.name); ~undefined
                callback(json);
               // console.log(json);
            }).catch(()=>{
            callback();
        });

        
    },
   // custom rendering functions for options and items
     render: {
        option: function() {
            return `<div class="py-2 d-flex">
                        <div>
                            <div class="mb-1">
                                <span class="h4">
                                    ${(icd_name) } 
                                </span>
                            </div>
                            <span class="h4">
                                    ${(icd_code) }
                                </span>
                        </div>
                    </div>`;
        },
        item: function() {
            return `div class="py-2 d-flex">
                        <div>
                            <div class="mb-1">
                                <span class="h4">
                                    ${(icd_name) }
                                </span>
                            </div>
                            <div class="description">${(icd_code) }</div>
                        </div>
                    </div>`;
        }
    },


 });
The route...

public function getData(Request $request){

$users = ICD10Code::project(["_id" => 0])->get(['icd_code','icd_name']);

return json_encode($users->toArray());

}



I am attempting to recreate this https://tom-select.js.org/examples/remote/. However since my dataset is huge I was wondering if really this would work



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire