selectize.js and Shiny : select choices from a rem

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.')
  })
}