Unable to get JSON file to work in p5.js

p5.js Beginners
1

I’m trying to load my p5.js sketch, but the sketch keeps coming up as loading. Then when I check to see, there is an error message saying"Uncaught (in promise) SyntaxError: Unexpected token / in JSON at position 0", which I not sure what to do about?

Not sure what to do! Some help will be much appreciated :slight_smile:

1 Like
2

Hello, and welcome to the community! :partying_face:

I would love to assist you in the debugging effort, but it’s hard without any code to debug. :wink: The only thing I can tell you is what the error message already says; somewhere in the code, a file is loaded and parsed as JSON, but it isn’t JSON (or it’s invalid JSON).

So you either have to change the file’s content to be valid JSON or stop loading the file at all.

3 Likes
3

Okay Thanks for the reply I will give that a go!

4

Hmmm okay, I’ve looked my code again and I still couldn’t find the error. I’ve also check my html as well to see if there was an issue… still not sure…

this is the code so far…

var data; 
var instagram, snapchat, messenger, facebook, email, instagramCol, snapchatCol, messengerCol, facebookCol, emailCol; 
var sizeMultiplier = 20; 


function preload (){
  data =loadJSON ("Sunday.json");
}
function setup() {
   createCanvas (windowWidth, windowHeight);
   background (255);
   noStroke ();
   textSize (20);
   instagramCol = color (142, 68, 173);
   messengerCol = color (133, 193, 233);
   snapchatCol = color (247, 220, 111);
   facebookCol = color (118, 215, 196);
   emailCol = color (178, 186, 187); 

}

 
function draw () {
  //12:00 am data
  fill (instagramCol);
size = data[8][0]*sizeMultiplier; 
ellipse (20, 40, size, size);

}

Screen Shot 2020-09-26 at 2.21.31 pm

If anyone can see what I’ve done wrong that would be great!

1 Like
5

I’ve had parsing problems in the past due to clumsy, hand written JSON files.

Can you give us more details on Sunday.json?

1 Like
6

so this is the shortened data format for my json data, but the rest follows the same pattern.

//Notifications received on the 16/08/20
 [
    {
          "12:00 am": {
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
          }
    },

    {
         "1:00 am": {
        "instagram": 1,
        "messenger": 2,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 3
         }
    },
    
    
    {
         "2:00 am": {
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
         }
    },
    
    {
         "3:00 am": {
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
         }
    },
    
    {
         "4:00 am": {
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
         }
    },
    
    {
         "5:00 am": {
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
         }
    },
    
    {
         "6:00 am": {
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
         }
    }
]
7

There’s the culprit. :blush: JSON does not support comments, so when the program encounters /, it panics and throws the exception Unexpected token / in JSON at position 0.

3 Likes
8

aahhh OMG! thanks! That seems to have solved it!