Skip to content

Commit 330b178

Browse files
committed
solves docs issue 837 for p5.js 2.x
1 parent 41a82f6 commit 330b178

File tree

1 file changed

+19
-26
lines changed

1 file changed

+19
-26
lines changed

src/content/tutorials/en/getting-started-with-nodejs.mdx.todo

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -175,37 +175,32 @@ let fs = require('fs');
175175

176176
// API endpoint to get list of songs
177177
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+
});
185185
});
186186
```
187187

188188
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.
189189

190190
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`.
191191

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`:
194193

195-
Your sketch.js file should look like this:
196194

197195
```js
198-
//variable for JSON object with file names
199196
let songs;
200197

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);
209204
}
210205

211206
function draw() {
@@ -216,13 +211,11 @@ function draw() {
216211
View your browser’s console to make sure the output of the `songs` variable looks something like this:
217212

218213
```
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+
] }
226219
```
227220

228221
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

Comments
 (0)