selectizeInput and remote API (javascript)

[saxi...@gmail.com]

Hi,

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/? (GeoJSON), thanks to this simple JS code.

Here is the Shiny example using the GitHub API :
  selectizeInput('github', 'Select a Github repo', choices = '', options = list(
    valueField = 'url',
    labelField = 'name',
    searchField = 'name',
    options = list(),
    create = FALSE,
    render = I("{
      option: function(item, escape) {
        return '<div>' +
               '<strong><img src=\"http://brianreavis.github.io/selectize.js/images/repo-' + (item.fork ? 'forked' : 'source') + '.png\" width=20 />' + escape(item.name) + '</strong>:' +
               ' <em>' + escape(item.description) + '</em>' +
               ' (by ' + escape(item.username) + ')' +
            '<ul>' +
                (item.language ? '<li>' + escape(item.language) + '</li>' : '') +
                '<li><span>' + escape(item.watchers) + '</span> watchers</li>' +
                '<li><span>' + escape(item.forks) + '</span> forks</li>' +
            '</ul>' +
        '</div>';
      }
    }"),
    score = I("function(search) {
      var score = this.getScoreFunction(search);
      return function(item) {
        return score(item) * (1 + Math.min(item.watchers / 100, 1));
      };
    }"),
    load = I("function(query, callback) {
      if (!query.length) return callback();
      $.ajax({
        url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
        type: 'GET',
        error: function() {
          callback();
        },
        success: function(res) {
          callback(res.repositories.slice(0, 10));
        }
      });
    }")
  ))
  )


And here is what I've done so far (more or less in a blind manner, sorry for that), it's not working :

    selectizeInput('address', 'Select addres', choices = '', options = list(
      valueField = 'features',
      labelField = 'name',
      searchField = 'name',
      options = list(),
      create = FALSE,
      render = I("{
      option: function(item) {
        return '<div>' + 'item.properties.name + '</div>';
      }
    }"),
      load = I("function(request, response) {
      $.ajax({
        url: 'http://api-adresse.data.gouv.fr/search/?' + encodeURIComponent(request),
        type: 'GET',
        data: {q: request.term},
        dataType: 'json',
        success: function (data) {
                  response($.map(data.features, function (item) {
                      return { label: item.properties.name, value: item.properties.name};
        }
      });
    }")
    ))
  )

Thanks for your help.

[saxi...@gmail.com]

I added a reproducible example. I get an array of items, but they are not displayed in the dropdown.


UI.R

########
# 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.R

############
# server.R #
############

library(shiny)

function(input, output) {
  output$github <- renderText({
    paste('You selected', if (input$github == '') 'nothing' else input$github,
          'in the Github example.')
  })
}

[saxi...@gmail.com]

It works !
See here : https://stackoverflow.com/questions/46223774/selectize-js-and-shiny-select-choices-from-a-remote-api/46247564#46247564