如何从目录加载随机文件答案

【问题标题】：How to load a random file from a directory如何从目录加载随机文件
【发布时间】：2021-02-27 00:44:03
【问题描述】：

我正在尝试在 GitHub Pages 上创建一个问题库。我使用以下方式加载特定文件：

$(document).ready(function() {
    
    var theQuestion = "./questionsBank/"+"question-4"+".html"; //path to load
    $("#question").load(theQuestion);  //loading the question
  
  });

现在，questionsBank 目录中有很多文件，我希望有一个脚本选择并随机加载一个，但我不知道如何在 JS 中执行。

如何检索 questionsBank 目录中的所有文件名？

我想做下面这样的事情，但不知道如何将目录中的文件名读入数组：

var questionFolder = './some directory';
var questionFiles = [];
questionFiles = readingFilesandPopulatingIntoArray(questionFolder); \\how to do this?
var folderSize = questionFiles.length ;
randomNumber = Math.floor(Math.random() * folderSize);
randomQuestion = questionFiles[randomNumber]; 
$("#question").load(randomQuestion);

【问题讨论】：

作为构建过程的一部分或 pre-commit 钩子在 ./questionsBank/ 中生成一个 index.js，它是文件夹中所有文件名的 json（或手动生成），然后使用 ajax 抓取它，然后做你的随机索引来挑选一个项目。 gh 页面是静态的，像这样的任何事情都需要在推送之前完成
@Lawrence Cherone，没有办法从浏览器环境中的文件夹中读取文件名吗？在任何桌面脚本中都可以轻松完成。
你的权利，没有办法从浏览器读取服务器上目录的内容，除非你公开一个排序列表
您正在制作一个网络应用程序，您的文件应该在服务器中并由您的代码通过 ajax 请求，相反，如果您正在构建桌面应用程序，您可以在节点中使用 fs 模块.js 打开文件。

标签： javascript jquery typescript github-pages

【解决方案1】：

正如@Lawrence Cherone 所评论的，获取远程目录内容的唯一方法是对其进行索引。

当然，Apache 有它自己的目录扫描器，如果配置好，它可以渲染一个带有其内容的 HTML 页面。然后您可以获取该索引并遍历其中的文件链接。

但是 GitHub Pages 不会生成这样的索引，所以需要自己生成。为此，您需要在页面的构建/部署过程中执行此操作（我们不知道）。在那里，您可以添加 NodeJS 脚本（或您喜欢使用的任何其他语言，例如普通的 bash 脚本），例如使用 node's fs dir.read() 来获取 ./questionsBank/ 目录中的文件列表并生成要保存的文件它以某种方式（例如，包含数组的 JSON 文件）。

最后，您可以在构建过程中通过import在某处将其直接包含在您的代码中，或者在您获取包含 JSON（或您决定使用的任何其他格式）的任何其他 URL 时获取它。

【讨论】：

谢谢，只写桌面java/python代码，没想到做web这么难。
没那么难：const response = await fetch(`${host}/questionsBank/index.json`); const index = await response.json(); const randomResponse = await fetch( index[ Math.floor(Math.random() * index.length) ] ); const randomContent = randomResponse.text();