My example with Tom Select does not work in my case

Question

I have in my file.json:

[
    {
        "url":"http://link.one",
        "title":"One title"
    },
    {
        "url":"http://link.two",
        "title":"Two title"
    },
    {
        "url":"http://link.three",
        "title":"Three title"
    },
    ...
]

I added to HTML: <select name="json" id="json" aria-label="Select item" placeholder="Enter text...">

I took the example from here...

In my JS:

var settings = {
    create: false,
    maxOptions: 10,
    maxItems: 1,

    valueField: 'url',
    labelField: 'title',
    searchField: 'title',
    sortField: 'title',

    load: function(query, callback) {

        var url = 'http://127.0.0.1:4000/data/file.json?q=' + encodeURIComponent(query);

        fetch(url)
            .then(response => response.json())
            .then(json => {
                callback(json.items);
            }).catch(()=>{
                callback();
            });

    },

    render: {
        option: function(item, escape) {
            return `<div class="py-2 d-flex">
                        <a href="${item.url}">${ escape(item.title) }</a>
                    </div>`;
        },

        item: function(item, escape) {
            return `<div class="py-2 d-flex">
                        <a href="${item.url}">${ escape(item.title) }</a>
                    </div>`;
        }
    },

    onChange: function(value) {
        if (value !== '') {
            window.location = value;
        }
    }
};
new TomSelect('#json', settings);

..., but all of this do not work, I always get "No results found". Why and what is wrong with my code? Anyone can help me?

Answer 1

There's no items property in your JSON file. It should be something like:

{
  "items": [{
      "url": "http://link.one",
      "title": "One title"
    },
    {
      "url": "http://link.two",
      "title": "Two title"
    },
    {
      "url": "http://link.three",
      "title": "Three title"
    }
  ]
}

or change the JavaScript to:

        fetch(url)
            .then(response => response.json())
            .then(items => {
                callback(items);
            }).catch(()=>{
                callback();
            });