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