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...

<select id="select-repo" placeholder="Select a Diagnosis" multiple></select>

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

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/XUx6bSI
via IFTTT