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

Question

由于没有JavaScript和API之前的编程知识，所以我遇到了一些麻烦，以使该示例适合我的需求：select GitHub repo。 我试图调整它以使用此API：https://api-adresse.data.gouv.fr/search/？ 。

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

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

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

library(shiny) 

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

谢谢您的帮助。

Answer 1

得到它的工作感谢this评论。

selectize不支持访问与点符号嵌套值

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