You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/tutorials/en/getting-started-with-nodejs.mdx.todo
+19-26Lines changed: 19 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -175,37 +175,32 @@ let fs = require('fs');
175
175
176
176
// API endpoint to get list of songs
177
177
app.get('/songs', (req, res) => {
178
-
fs.readdir('songs', (err, files) => {
179
-
if (err) {
180
-
res.status(500).send('Error reading song files');
181
-
} else {
182
-
res.json({ files });
183
-
}
184
-
});
178
+
fs.readdir('songs', (err, files) => {
179
+
if (err) {
180
+
res.status(500).send('Error reading song files');
181
+
} else {
182
+
res.json({ files });
183
+
}
184
+
});
185
185
});
186
186
```
187
187
188
188
The code above initializes the [file system module (`fs`)](https://nodejs.org/api/fs.html), which provides APIs that help users interact with file systems on their computers. It also uses the `app.get()` method, which handles GET HTTP requests to the `/songs` URL. Here you use the file system module to read filenames from the folder, parse them as a JSON object, and send them in the response to the GET request.
189
189
190
190
Now that you have instructed the GET request on how to read the songs folder filenames, we can upload filenames as a JSON object in `sketch.js`.
191
191
192
-
- Use `preload()` and `loadJSON()` to load files from the songs folder in a global variable named `songs`. Visit the [p5.js reference](/reference) to learn more about [`preload()`](/reference/p5/preload) and [`loadJSON()`](/reference/p5/loadJSON).
193
-
- Use `console.log(songs)` in `setup()` to print the contents of the JSON array.
192
+
**Note:** In p5.js 2.x, the `preload()` function and synchronous loading methods have been removed. Instead, you should use `async`/`await` and the browser's `fetch` API to load data before using it in your sketch. Here is how you can update your `sketch.js`:
194
193
195
-
Your sketch.js file should look like this:
196
194
197
195
```js
198
-
//variable for JSON object with file names
199
196
let songs;
200
197
201
-
function preload() {
202
-
//load and save the songs folder as JSON
203
-
songs = loadJSON("/songs");
204
-
}
205
-
206
-
function setup() {
207
-
createCanvas(400, 400);
208
-
console.log(songs)
198
+
async function setup() {
199
+
createCanvas(400, 400);
200
+
// Fetch the list of songs from the server
201
+
const response = await fetch('/songs');
202
+
songs = await response.json();
203
+
console.log(songs);
209
204
}
210
205
211
206
function draw() {
@@ -216,13 +211,11 @@ function draw() {
216
211
View your browser’s console to make sure the output of the `songs` variable looks something like this:
217
212
218
213
```
219
-
Object i
220
-
files: Array(3)
221
-
0: "C Major Scale.json"
222
-
1: "Frere Jacques.json"
223
-
2: "Mary's Lamb.json"
224
-
length: 3
225
-
// ...prototype
214
+
{ files: [
215
+
"C Major Scale.json",
216
+
"Frere Jacques.json",
217
+
"Mary's Lamb.json"
218
+
] }
226
219
```
227
220
228
221
Now you are ready to build the [Melody App](https://docs.google.com/document/u/0/d/1mzJv-7qU1_CmkWI0ZFeqf3CeBfpOOVIrvPRZtxqFxRI/edit)! You can access completed code for this guide in [this Github repository](https://github.com/MsQCompSci/melodyAppNodeStarter/tree/main).
0 commit comments