Problems Loading External JSON File

p5.js Coding Questions
1

Hello! I’m attempting to load data from an external file, where my JSON data, which is called something like exampleJSON.json and is stored in a separate JSON folder, looks like this:

{
    "Pride and Prejudice.txt": {
        "greed": 0.0,
        "courage": 0.0011802738718837227,
        "devoted": 0.0002989005259965272,
        "sad": 0.00018101052216503002,
        "pride": 0.0022677937984222508,
        "tired": 6.810003313834709e-05,
        "charm": 0.00042263156465682734,
        "fate": 5.1907429150265965e-05,
        "future": 0.0009025623726169644,
        "white": 2.9485049466170993e-05,
        "honor": 0.0,
        "love": 0.001009343619121599,
        "fight": 0.00010381485830053193,
        "king": 3.679464957977765e-05,
        "wife": 0.0005861039620562556,
        "friend": 0.0014756481571094975,
        "dead": 2.4375135544563993e-05,
        "husband": 0.0012475462422959285,
        "plot": 0.0,
        "trick": 0.0,
        "skill": 0.000691712258478692,
        "justice": 0.0008824262955545215,
        "dedication": 0.0,
        "steady": 0.0016104060786270341,
        "smart": 0.00046371978767191713,
        "coward": 0.0,
        "old": 7.36130082364777e-05,
        "beauty": 0.0006009292559964263,
        "grace": 9.050526108251501e-05,
        "lead": 0.0006810003313834708
    },
    "The Prince .txt": {
        "greed": 0.001173987618587119,
        "courage": 0.0021106656844839247,
        "devoted": 0.000979951924938965,
        "sad": 0.00011127130571185158,
        "pride": 0.0,
        "tired": 5.5816862767168474e-05,
        "charm": 0.0001732008558468698,
        "fate": 0.000127634733022418,
        "future": 0.0008070192323026771,
        "white": 0.0,
        "honor": 0.0001900394357982257,
        "love": 0.0002139539983990744,
        "fight": 0.0014039820632465979,
        "king": 0.001244018170402567,
        "wife": 0.00012531878375062716,
        "friend": 0.0005092573497032675,
        "dead": 5.993581205128391e-05,
        "husband": 0.0,
        "plot": 0.0,
        "trick": 0.0,
        "skill": 0.0022677937984222508,
        "justice": 0.0,
        "dedication": 0.0022677937984222508,
        "steady": 0.0,
        "smart": 0.0,
        "coward": 0.0,
        "old": 0.0004826837214914927,
        "beauty": 0.0,
        "grace": 0.00044508522284740634,
        "lead": 0.000837252941507527
    }
)

In my p5 sketch I attempt to load the JSON like this:

var theData;

function preload() {
  var url = "JSON/exampleJSON.json";
  theData = loadJSON(url,"json");
}

However, when I try to console.log(theData) in setup like this:

function setup() {
  console.log(theData);
  noCanvas();
}

after preload, it returns “undefined”. I’m not sure why it doesn’t seem to be loading the data. For clarification, I’m running the file on a local host on Python’s https server. I call the JS script in an HTML file like this:

Thank you in advance for any advice!

2
  • Make sure you’ve got a subfolder named exactly “JSON” w/ all caps. :file_folder:
  • And that subfolder is inside the same root folder where your “index.html” file is. :file_cabinet:
  • Same for “exampleJSON.json” inside subfolder “JSON/”. Pay attention to its capitalized letters too. :capital_abcd:

Here’s some running online sketch using loadJSON(): :running_man:

1 Like