selectize.js和Shiny:从远程API中选择选项

时间:2017-09-14 16:05:03

标签: r shiny selectize.js

由于没有JavaScript和API的先前编程知识,我有一些麻烦使这个例子符合我的需求:select GitHub repo。 我试图让它适应这个API:https://api-adresse.data.gouv.fr/search/

响应是一个GeoJSON文件,其中的功能存储在响应$ features中。我想为每个功能获取属性$ label属性。

这是我到目前为止所做的。我得到一个数组,但项目没有显示在下拉列表中......

用户界面:

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

library(shiny)

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

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

感谢this评论。

  

选择不支持使用点表示法访问嵌套值

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

library(shiny)

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