You Expecting a lot from "Javascript"
Well you can't do it without server side help. For example you can use PHP to send directory listing data as JSON response.
http://hostaddress/endpointdirectory
{
"Folder" : "Data"
"Files" : [ "File1" , "File2" ]
}
Else there is work around simple hack using XMLHttpRequest() you will get HTML DOM response.
<html>
<head>
<title>Index of /directoryWantToList</title>
</head>
<body>
<h1>Index of /directoryWantToList</h1>
<table>
<tr><th valign="top"><img src="/icons/blank.gif" alt="[ICO]"></th><th><a
href="?C=N;O=D">Name</a></th><th><a href="?C=M;O=A">Last modified</a></th>
<th><a href="?C=S;O=A">Size</a></th><th><a href="?C=D;O=A">Description</a>
</th></tr>
<tr><th colspan="5"><hr></th></tr>
<tr><td valign="top"><img src="/icons/back.gif" alt="[PARENTDIR]"></td>
<td><a href="/">Parent Directory</a> </td><td> </td><td
align="right"> - </td><td> </td></tr>
<tr><td valign="top"><img src="/icons/text.gif" alt="[TXT]"></td><td><a
href="File1.txt">File1.txt</a> </td><td align="right">2018-
01-15 16:52 </td><td align="right"> 0 </td><td> </td></tr>
<tr><td valign="top"><img src="/icons/text.gif" alt="[TXT]"></td><td><a
href="File2.txt">File2.txt</a> </td><td align="right">2018-
01-15 16:52 </td><td align="right"> 0 </td><td> </td></tr>
<tr><th colspan="5"><hr></th></tr>
</table>
<address>Apache/2.4.29 (Win32) OpenSSL/1.1.0g PHP/7.2.0 Server at
localhost Port 80</address>
</body></html>
Using this DOM Response you need to get those Files names by parsing elements which is a bad hack.....
Javascript evolving a lot today but still its limited to client side.
Reference Thread :
Listing files of a directory in a webpage
get a list of all folders in directory