如何通过Javascript读取CSV数据并在Shiny中渲染表格？

问题根因 #

• 报错Shiny.setInputValue is not a function是因为内联JS执行时Shiny客户端上下文还未完成初始化，对应的方法还未挂载。
• 隐性问题1：fetch是异步API，getData()返回的是Promise对象而非解析后的CSV结构化数据，直接传递给R也无法正常解析为表格。
• 隐性问题2：原JS代码仅打印了拆分后的行数据，没有整理为R可识别的结构化数组，后续转data.frame会失败。

修复后完整代码 #

library(shiny)
library(DT)

ui <- fluidPage(
  tags$div(id = "loading-tip", "Reading file"),
  tags$script(HTML("
    $(document).on('shiny:connected', function() {
      function getData(){
        return fetch('this_data.csv')
          .then(response => response.text())
          .then(csvString => {
            // 拆分CSV并过滤空行
            const rows = csvString.split('\\n').filter(row => row.trim() !== '');
            const structuredData = [];
            for (const row of rows) {
              structuredData.push(row.split(','));
            }
            return structuredData;
          })
      } 
      
      // 异步拿到数据后再传给R并隐藏加载提示
      getData().then(map => {
        Shiny.setInputValue('mapInR', map);
        document.getElementById('loading-tip').style.display = 'none';
      })
    })
  ")),
  DT::dataTableOutput("table")
)

server <- function(input, output, session) {
  output$table <- DT::renderDataTable({
    # 等待数据传入再渲染
    req(input$mapInR)
    # 第一行作为表头，剩余行作为内容
    df <- as.data.frame(input$mapInR[-1, ], stringsAsFactors = FALSE)
    colnames(df) <- input$mapInR[1, ]
    # 转换数值列类型
    df[, 2:5] <- lapply(df[, 2:5], as.numeric)
    df
  })
}

shinyApp(ui, server)

使用说明 #

将测试用的this_data.csv文件放置到Shiny项目的www目录下即可运行，实现效果符合预期：页面加载时先显示「Reading file」提示，CSV读取解析完成后自动隐藏提示并渲染表格。

测试用this_data.csv内容参考：

Date,Open,High,Low,Close
1/2/2007,50.03978,50.11778,49.95041,50.11778
1/3/2007,50.2305,50.42188,50.2305,50.39767
1/4/2007,50.42096,50.42096,50.26414,50.33236
1/5/2007,50.37347,50.37347,50.22103,50.33459
1/6/2007,50.24433,50.24433,50.11121,50.18112
1/9/2007,49.99489,49.99489,49.80454,49.91333
1/10/2007,49.91228,50.13053,49.91228,49.97246
1/11/2007,49.88529,50.2391,49.88529,50.2391

内容的提问来源于stack exchange，提问作者PLA