Issue with selectize itegration - Option labels always "undefined"

[C4rter]

Hi, I'm integrating the query builder into a site I'm working on. It's really great and for the most part easy to work with.

But I've got an issue with the selectize integration. I used the example as a base but even with the example code, all the options are showing up as "undefined".

That's my filter config:

{
id: 'query_theme',
label: 'Theme',
type: 'string',
operators: ['equal'],
plugin: 'selectize',
plugin_config: {
valueField: 'id',
labelField: 'query_theme',
searchField: 'query_theme',
sortField: 'query_theme',
create: true,
maxItems: 1,
plugins: ['remove_button'],

            onInitialize: function() {
                var that = this;
                if (localStorage.demoData === undefined) {
                    $.getJSON('http://querybuilder.js.org/assets/demo-data.json', function(data) {
                        localStorage.demoData = JSON.stringify(data);
                        data.forEach(function(item) {
                            that.addOption(item);
                        });
                    });
                }
                else {
                    JSON.parse(localStorage.demoData).forEach(function(item) {
                        that.addOption(item);
                    });
                }
            }
        },
        valueSetter: function(rule, value) {
            rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
        }
    }

I've also included this code from the example:

// Fix for Selectize
$('#builder').on('afterCreateRuleInput.queryBuilder', function(e, rule) {
if (rule.filter.plugin == 'selectize') {
rule.$el.find('.rule-value-container').css('min-width', '200px')
.find('.selectize-control').removeClass('form-control');
}
});

Strangly, the option ids are all there in the source code of the page, but all the labels are somehow undefined. I hope you can help me with this.

[mistic100]

Don't really know what I can say... and does not really seems related to the builder itself for me.

[C4rter]

Somehow it must have something to do with the builder, because the examples from Selectize work on the same page. But when I use the code to get/set the options in the builder filter, the labels read "undefined" again.

When I try the code from this example:
https://github.com/selectize/selectize.js/blob/master/examples/cities.html
You have to change the URL in the example to something like "https://querybuilder.js.org/assets/demo-data.json" for example because the one in the example is unreachable.

It works well on it's own, but when I copy and paste the inside of the "onChange" event into the builder filter, all the labels read "undefined" again.
It seems to have something to do with how selectize is loaded in the builder, or something, I don't know exactly.

Should I provide you with an example in the browser?

[C4rter]

Is it possible it's related to me using the "query-builder.standalone.js"?

[C4rter]

I could provide an example of the issue here:
http://www.moviegeek.de/example/example.html

[mistic100]

I missread your code.
You set labelField: 'query_theme' but this is not a valid field in the data source (only id or name)

So I was right : not related to the builder :-)

[mistic100]

When something is not working, isolate it from the rest of the app and you could have found yourself the problem.

[C4rter]

OMG I am soooo blind. That's what I get for just copy/pasting the options instead of understanding them. I would have never found that today. Thank you so much!