1

I am working on a p5.js project that loads some configuration options from a JSON file. I am preloading the config file in p5.js's preload() function, like so:

let config = {};

function preload() {
    config = loadJSON("data/config.json");
}

Part of the config JSON file contains some song objects that each have a filename property that is another JSON file I would like to preload:

"songs": [
    {
        "title": "Song One",
        "filename": "01.json"
    },
    ...
]

I cannot access the config file data before p5.js's setup() function (as I cannot guarantee the config file has been completely read until then), by which time I can no longer preload the song JSON files.

I'm trying to figure out if there's any way around this.

EDIT: Thanks to George's answer below, I have it working as below. The following all runs before entering p5.js's setup() function, which is exaclty what I was after:

let config = {};

function preload() {
    config = loadJSON("config.json", configLoaded);
}

function configLoaded(_config) {
    let songs_length = _config.album.songs.length;
    for (let i = 0; i < songs_length; i++) {
        loadJSON("data/" + _config.album.songs[i].filename, songLoaded);
    }
}

function songLoaded(_song) {
    console.log(_song);
}
safetycopy
  • 554
  • 4
  • 15

2 Answers2

3

You should be able to load loadJSON() and setup the callbacks for when the data is either loaded or errors.

Hopefully, if everything is setup neatly, something as simple as this should work:

function preload() {
    config = loadJSON("data/config.json");
    loadJSON(config.songs[0].filename,songOneLoaded);
}

function songOneLoaded(data){
    console.log("song one data loaded",data);
}

Note I can't test the above, but hopefully it helps point you in the right direction. I would also double check the paths to the .json files to load. Ideally you'd always be handling the error case as well.

George Profenza
  • 50,687
  • 19
  • 144
  • 218
  • Thanks, George - you showed me how to think about it a little differently and I have it working now. I made an edit to my question to show how I did it. – safetycopy Feb 12 '18 at 17:37
  • No problem! Great to see you've got it working. Bare in mind you're re-using the same callback for all songs. Next step might be populating a list of songs as they load. Best of luck – George Profenza Feb 12 '18 at 17:55
  • Once the config file has loaded, I'm creating an array of `Song` objects. Each `Song` object takes the filename as an argument to it's constructor, and preloads it's own JSON file during the array creation loop :) – safetycopy Feb 12 '18 at 18:51
0

Can't you just add it to the preload() function? Something like this:

let config = {};
let songOne = 

function preload() {
    config = loadJSON("data/config.json");
    let songOneUrl = config.songs[0].filename;
    songOne = loadSongFile(songOneUrl);
}

The above is just an example, and the syntax is probably not right (I'm not sure how you're loading the songs). But the idea should be the same.

Edit: I just saw that George answered this a few seconds before me. I'd take his word over mine.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • 1
    I'm trying to avoid explicitly preloading the song JSON files from `preload()` as the different config files I'm using will include a variable number of songs. Ideally, I like to have a bunch of config files and simply rename the one I need to `config.json` so I don't have to touch the JavaScript at all. George's answer pointed me in the right direction and I have it working now, but thanks for your response. – safetycopy Feb 12 '18 at 17:29