createFileInput - loading JSON data

[rvegele]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: 0.9.0
• Web browser and version: Firefox Developer edition 69.0b3
• Operating System: macOS
• Steps to reproduce this: Create a JSON file and load it using createFileInput.

Feature enhancement details:

I'm trying to simply read a JSON file with the createFileInput() feature. Unfortunately parsing the JSON file.data is proving too complicated. I'd either like a pointer of how to do it or an enhancement to the feature if this is not possible out of the box. I've tried looking through the forums for a solution wihout success.

[blueberrymuffin3]

Could you just use JSON.parse()?

[limzykenneth]

@rvegele When loading a file with createFileInput(), it will attempt to determine the type of the file and store it as an object accordingly. When loading a JSON file it will save the JSON data as a base64 encoded string of the JSON data in file.data.

To get the JSON data as a Javascript object, you will need to do a few things:

// Split file.data and get the base64 string
let base64Str = file.data.split(",")[1];
// Parse the base64 string into a JSON string
let jsonStr = atob(base64Str);
// Parse the JSON object into a Javascript object
let obj = JSON.parse(jsonStr);

If you cannot find a similar question on the forum, you can just post it yourself, that way in the future if someone has the same problem, they can find it there as well.

[polygonfuture]

@limzykenneth I'm having a similar issue. Your solution does not seem to be working.

Used saveJSON. File looks good. Load using createFileInput() method. As it runs the loadJson callback I'm getting errors with your file.data.split(",")[1]; in the latest p5.js

Uncaught TypeError: file.data.split is not a function

function loadJson(file) {
    print(file);
    // Split file.data and get the base64 string
    let base64Str = file.data.split(",")[1];
    // Parse the base64 string into a JSON string
    let jsonStr = atob(base64Str);
    // Parse the JSON object into a Javascript object
    let obj = JSON.parse(jsonStr);  
  }

results of print(file) look good:

 {file: File, _pInst: undefined, type: "application", subtype: "json", name: "dots.json"…}
file: File
_pInst: undefined
type: "application"
subtype: "json"
name: "dots.json"
size: 315419
data: Array[2916]

Any thoughts? I'm not turning up clear answers.

[limzykenneth]

@polygonfuture Do you have a minimal example of this?

[pharaoh583]

I solved it this way. I have a createfileInput(loadJ)
and the loadJ function is the following:
`function loadJ(file){
let data = JSON.stringify(file.data);
let obj = JSON.parse(data);
for(let i = 0; i < obj.length; i++){
print(obj[i]);
}
return;

}`
you can start working with obj
Anyway here is the link to see it working https://editor.p5js.org/moises.quispe/sketches/31YBfDik_