JavaScript for automatic file reading

I'm currently working on a personal file storage website as part of a practice project. The code itself is functional, but I'm facing the challenge of managing a large JSON file containing the names of all the files I want to display on the website.

Is there a way for JavaScript to automatically read these files? Just to provide some context, all the files are housed in a single folder.

This is an overview of my file structure;

root
|-HTML
|-Style
| |-CSS
| |-JS
|  |-Downloads.js (the JavaScript file responsible for managing downloads)
|-Files
  |-files (this folder contains all actual files)
  |-img (this folder contains thumbnail images used on the site)
javascriptjsonfilehosting

Answer №1

Using pure Javascript for file handling is not feasible as it runs in the browser and restrictions are in place for security purposes. Imagine the chaos that could ensue if malicious scripts were able to tamper with files on our computers, alter configurations, or install viruses.

Instead, consider installing Node.js on your machine and utilizing JSON Server to create an API that serves your JSON file. You can then fetch this data using AJAX requests within your JavaScript code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Serializing Plain Old Java Objects (POJOs) using only G

Can anyone help troubleshoot this code issue: String convertModelToJson(MyModel model) { // Get the AutoBean instance    AutoBean<MyModel> bean = AutoBeanUtils.getAutoBean(model); return AutoBeanCodex.encode(bean).getPayload(); } Despite ...

javajsongwt

What is the best way to showcase various JSON data across two different activities?

Trying to grasp the concept of parsing json data in a android app has been quite an adventure. Progress has been good overall, but there is a specific issue that I need help with. Following this tutorial has been instrumental in getting everything set up a ...

javaandroidjson

Setting the selected value of a static select menu in Angular 2 form

I'm having an issue with my Angular 2 form that includes a static select menu. <select formControlName="type" name="type"> <option value="reference">Referentie</option> <option value="name">Aanhef</option> &l ...

javascriptformsselectangular

Ways to reuse test cases across different test suites in Protractor

There are some shared test cases that can be utilized across different test suites. For example, suppose suite x and suite y both require the same set of test cases to function properly. To address this, a separate .js file containing the shared code has ...

javascriptangularseleniumjasmineprotractor

Fetch a document from a NodeJS Server utilizing Express

Is there a way to download a file from my server to my machine by accessing a page on a nodeJS server? I am currently using ExpressJS and I have attempted the following: app.get('/download', function(req, res){ var file = fs.readFileSync(__d ...

javascriptnode.jsfileexpressdownload

Parsing error encountered within the if-else statement

I am attempting to retrieve JSON data from a URL and store it in an SQLite database. From the SQLite database, I am converting the data into a JSON array of objects and using those values to perform if and else conditions. Each object in the JSON has a cre ...

jsonsqlite

An error has occurred during runtime due to a TypeError: The application is unable to access properties of an undefined object, specifically 'Upload'. This error has

Greetings to the amazing Stack Overflow Community! Currently, I'm developing a Next.js application that requires me to upload videos to Vimeo. To achieve this functionality, I've implemented tus-js-client for handling the uploads. However, I&apo ...

javascriptnext.jsvimeo

Utilizing Ajax to dynamically update the content of a div element

As a newcomer to Ajax, I am trying to use xmlhttprequest to dynamically change the content of a div by fetching HTML from different URLs. However, my code doesn't seem to be working as expected. Can someone help me identify what I might be doing wrong ...

javascripthtmlajaxxmlhttprequestserver-side

What is the best way to accurately determine an element's location after scrolling to it?

I'm currently working on pinpointing the location of a specific element on a webpage once it has been scrolled to using JavaScript. Queries: How can I precisely determine the position of an element post-scroll? What are some common errors or extra st ...

javascriptselenium-webdriverplaywrightgetboundingclientrectseleniumbase

What is the best way to create a JSON array in Grails as described below?

Can someone please guide me on how to create a JSON array using Grails? Here is what I have attempted: {"paymentRequestlist":[{"sourceAccountNo":"555555555555555","sourceBankCode":"GLBBNPKA","destinationBankCode":"GLBBNPKA","destinationBankAccountNo":"123 ...

arraysjsongrails

Unexpected server failure due to a new error occurring in the asynchronous authentication login function

This problem is really frustrating... I'm having trouble with a throw exception that causes my express server to crash in my async login function. The issue here is that the error isn't caught by the try/catch block. Even though the user data is ...

javascriptnode.jsexpress

Is my implementation of Model and Views in backbone.js accurate?

I'm new to backbone.js and I've just created my first page. I'm curious to know if I'm headed in the right direction with my approach (if there even is a "correct" way in software development). Is there a way to automatically bind mode ...

javascriptbackbone.js

Customizing the initial search parameters in Vue InstantSearch: A step-by-step guide

I am utilizing the Vue components from Algolia to perform a search on my index. The search functionality is working correctly, but I am curious about setting the initial values for the refinement list upon page load. This is how I have set up the search: ...

javascriptvue.jsalgolia

Using JSON to pass a function with parameters

I have a small issue that I'm struggling to solve. My dilemma lies in sending a JSON with a function, along with parameters. Typically, it's easy to send a function in JSON like this: var jsonVariable = { var1 : 'value1', var2 : &apos ...

javascriptjsonfunction

Error: Unable to modify the value of a protected property '0' in the object 'Array'

I am facing a challenging issue with implementing a Material UI slider in conjunction with Redux. Below is the code for the slider component: import { Slider } from '@material-ui/core' const RangeSlider = ({handleRange, range}) => { ...

javascriptreact-reduxnext.js

Implementing V-model within an iteration

I am encountering an issue while trying to utilize v-model within a v-for loop, resulting in an error message. Is there a solution to make this functionality work properly? <ul class=""> <li class="" v-model="category.data" v-for="category in ...

javascriptvue.js

text field remaining populated

I have a form where the input fields clear when they are clicked on. It works well on most pages, but there is a specific type of page where it is not functioning properly due to the presence of another javascript running. - issue observed // On this pa ...

javascriptjquery

Utilize store functions (such as dispatch and getState) in external modules like webSockets, rather than within components

I have implemented React and Redux, along with webSocket to handle server side events. Currently, I can dispatch actions from a component by assigning a function to the dispatcher using the mapDispatchToProps() function. But what if I want to trigger an ...

javascriptreactjsreduxreact-redux

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

javascriptnode.jsreactjsnpmnpm-start

Guide on appending a file to a formData object in vue.js

Having trouble adding the file from the input to the formData object. Even after trying multiple solutions, the object appears to be empty when I log it. Can't seem to figure out what's wrong. File Input: <input class="btn btn-sm btn-rounded ...

javascriptvue.jsvuejs2