json-editor
json-editor copied to clipboard
Enumsource with $ref
Hi, im using enumsource with $ref to load data from ajax call. but it is showing empty dropdown. below is my code snippet.
"type": "object", "required": ["value"], "properties": { "valuev": { "type": "string", "enumSource": [{
"source": { "$ref": "ajaxcall"}, "title": "{{item.title}}", "value": "{{item.id}}" }]
} }
$ref is returning below response.
[{"id":1,"title":"value1"},{"id":2,"title":"value2"}]
but empty dropdown is rendering. could you please help me to get rid of this
I have exactly the same problem.
I tried 2 different methods to get right dropdowns.
- fetching json file of the schema with
fetch API
: does not work - set schema directly in editor declaration : does not work
I created gist with my attempts code.
But the problem, that is this schema working well in demo page
I really don't understand. And I really need this tool for my current project...
Help me please :)
I have found my problem. It was my declaration of selectize
that could not work because of no integration of selectize resources in <head>
.
My schema works well with $ref
in schema
declaration with select2
but not with selectize
.
I done some tests and i confirm that enumSource
does not work with selectize
.
Managed to do so.
if(this.enumSource[i].source && typeof this.enumSource[i].source == "object") {
var src = this.jsoneditor.expandRefs(this.enumSource[i].source);
this.enumSource[i].source = [];
for (var j in src)
{
this.enumSource[i].source.push(src[j]);
}
}
Goes at the end of this for loop
.
Unfortunately, $ref
ignores three path in external links, so http://example.com/test.json#/nodename
will still be evaluated as http://example.com/test.json
's root.
And also the order is lost because of conversion to object.
Thanks @desertkun. To get this to work for properties where the value is "number" type (i.e. not "string") I had to also add a call to self.typecast here
// Rendered value
if (this.enumSource[i].value) {
item_values[j] = self.typecast(this.enumSource[i].value({
i: j,
item: item
}));
}