selectize.js and Shiny : select choices from a remote API - r

Question

With no prior programming knowledge in JavaScript and APIs, I'm having some troubles to make this example fit my needs : select GitHub repo.
I'm trying to adapt it to work with this API: https://api-adresse.data.gouv.fr/search/? .
The response is a GeoJSON file, where the features are stored in response$features. I want to get the properties$label attribute for each feature.
Here is what I've done so far. I get an array but the items are not displayed in the dropdown...
UI :
########
# ui.R #
########
library(shiny)
fluidPage(
title = 'Selectize examples',
mainPanel(
selectizeInput('addresses', 'Select address', choices = '', options = list(
valueField = 'properties.label',
labelField = 'properties.label',
searchField = 'properties.label',
options = list(),
create = FALSE,
render = I("
{
option: function(item, escape) {
return '<div>' + '<strong>' + escape(item.properties.name) + '</strong>' + '</div>';
}
}" ),
load = I("
function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api-adresse.data.gouv.fr/search/?',
type: 'GET',
data: {
q: query
},
dataType: 'json',
error: function() {
callback();
},
success: function(res) {
console.log(res.features);
callback(res.features);
}
});
}"
)
))
)
)
Server :
############
# server.R #
############
library(shiny)
function(input, output) {
output$github <- renderText({
paste('You selected', if (input$github == '') 'nothing' else input$github,
'in the Github example.')
})
}
Thank you for your help.

Answer 1

Got it working thanks to this comment.
selectize doesn't support accessing nested values with dot notation
UI:
########
# ui.R #
########
library(shiny)
fluidPage(
title = 'Selectize examples',
mainPanel(
selectizeInput('addresses', 'Select address', choices = '', options = list(
valueField = 'name',
labelField = 'name',
searchField = 'name',
loadThrottle = '500',
persist = FALSE,
options = list(),
create = FALSE,
render = I("
{
option: function(item, escape) {
return '<div>' + '<strong>' + escape(item.name) + '</strong>' + '</div>';
}
}" ),
load = I("
function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api-adresse.data.gouv.fr/search/?',
type: 'GET',
data: {
q: query
},
dataType: 'json',
error: function() {
callback();
},
success: function (data) {
callback(data.features.map(function (item) {
return {name: item.properties.name,
label: item.properties.label,
score: item.properties.score};
}));
}
});
}"
)
))
)
)
Server:
############
# server.R #
############
library(shiny)
function(input, output) {
output$github <- renderText({
paste('You selected', if (input$github == '') 'nothing' else input$github,
'in the Github example.')
})
}