We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hi,
I'm running this project where I want to pull JSON data from a file based on time interval. As you can see in the code I've managed with help! to get this to work for the images. Now I want to pull data on the same interval from a JSON file. I get no errors except that the text I get back is [object Object].
I've managed to get lines of data from the JSON file by following Daniel Shiffman online video. But when I try to get the time based data. I every time get the [object Object] in the sketch. The file is in the correct place. I'm pretty sure it's formatted correctly.
Also I aware that the time interval parts of the code are not correct, I still need to look up much on these things. But without that I should still be able to see my JSON data, not?
let faces = []; //Laden van de afbeeldingen
let idx = 0;
let personidx = 0;
//Time based interval var voor de afbeeldingen
var data;
var canvas;
var consolediv;
const INTER = 1.5 * 1000; //timer
function preload(){ //laden van de foto's voor de draw functie
data = loadJSON('ID_python/id_JP_.json');
for (let i = 0; i < 3; i++) { //aantal foto's in de map van 0-3
faces[i] = loadImage('images/' + i + '.png'); //mapnaam + nummer + bestandstype
}
}
function setup() {
createCanvas(window.innerWidth,window.innerHeight);
//canvas = createCanvas(window.innerWidth, window.innerHeight);
setInterval(() => idx = (idx + 1) % faces.length, INTER);
var persons = data.persons;
for (var p = 0; p < persons.length; p++) {
}
setInterval(() => personidx = (personidx + 1) % persons.length, INTER);
}
function draw() {
background(135);
imageMode(CENTER); //lijn openlaten voor verticaal scherm
image(faces[idx], window.innerWidth/2, 270, 500, 500); //lijn openlaten voor verticaal scherm
text(data.persons[personidx], window.innerWidth/2, 270, 500, 500);
//image(faces[idx], 70, 25, 400, 500); //lijn openlaten voor horizontaal scherm
//text(data.persons[1], window.innerWidth/2-50, 550);
fill(255,255,255);
}
window.onresize = function() {
var w = window.innerWidth;
var h = window.innerHeight;
canvas.size(w,h);
width = w;
height = h;
};
Json file example
{
"persons" : [
{
"name" : "Naoki Kano",
"country": "イギリス領インド洋地域",
"city" : "香取郡神崎町",
"zip code": "183 - 6141",
"street name": "鈴木 Street",
"license plate": "QLJ D83",
"phone number": "090 - 2275 - 0626",
"email": "given randomEmail",
"username": "chamada",
"password": "xxxxx",
"iban": "GB96YTST9390289207672",
"credit card": "xxxxxxxx",
"credit card security code": "xxxx",
"cryptocurrency code": "XPM",
"profession": "Geophysical data processor"
},
{
"name" : "Kaori Kondo",
"country" : "ハード島とマクドナルド諸島",
"city" : "中野区",
"zip code" : "026-7987",
"street name" : "三宅 Street",
"license plate" : "156JES",
"phone number" : "070-4279-4120",
"email" : "given randomEmail",
"username" : "nakajimasayuri",
"password" : "xxxxx",
"iban" : "GB18THCM8220324313297",
"credit card" : "xxxxxxxxxx",
"credit card security code" : "xxxx",
"cryptocurrency code" : "EMC",
"profession" : "Designer, graphic"
}
]
}
Answers
You're declaring persons[] as a local variable inside setup()! #-o
Instead, declare it globally the same way you did for faces[]. *-:)
Also some extra tips: In general, variables should follow the lowerCamelCase naming convention. ~O)
Therefore, personidx & consolediv should be renamed to personIdx & consoleDiv respectively. :-bd
P.S.: Actually, consoleDiv is never used in your sketch. You should probably just delete it. 8-X
And even though onresize() is perfectly OK, p5.js already offers it as windowResized(): ;;)
https://p5js.org/reference/#/p5/windowResized
Hi, Thanks again for the quick response.
I adjusted accordingly. And now I get the first name with the first image. They disappear at the same time, which is good. but then I get the second image without the second name. And it freezes on image two and doesn't go to the third.
At the second image I get TypeError: data.persons[personIdx] is undefined [Learn More] sketch.js:40:3 in the console
Then when I do text(data.person(personIdx), window.innerWidth/2, 400, 500, 500);
Shouldn't I get the whole persons piece from the JSON file? with
.name
after it I get a name, without I get [object object]I've remade your sketch! In order to simplify things, I've removed setInterval().
In its place, I'm using the noLoop() + redraw() approach to change persons[]' current idx.
Also I've inserted each loaded p5.Image object from faces[] into each persons[]'s object.
You can check it out running online at this link below: :bz
https://ThimbleProjects.org/gotoloop/388545New link: https://Glitch.com/~json-faces-id
You can hit CTRL+U in order to see the "index.html" there: O:-)
And the "sketch.js" file is at this link: :-bd
https://ThimbleProjects.org/gotoloop/388545/sketch.js"images/0.png":
https://ThimbleProjects.org/gotoloop/388545/images/0.png
"images/1.png":
https://ThimbleProjects.org/gotoloop/388545/images/1.png
"ID_python/id_JP_.json":
https://ThimbleProjects.org/gotoloop/388545/ID_python/id_JP_.json
Hi, wow almost a whole other code with the const approach. So your code works perfectly in the example. 8-> ^:)^
I copied it on my editor to add more images and more JSON queries and tried to get the timer to work. [-O<
That did not work. :(( There are also a few things I don't really understand or don't know how to alter them to my specific needs. I tried but with no succes. ^#(^
What didn't work is I only get two names and two picture in the correct order. But I have 5 images and 5 names in the JSON file. When adding more integers to the
const FACES
I get no pictures and just the background instead. Also no names, but my guess is that is because the images and the names are connected to each other. I get this error in the console. TypeError: person is undefined at sketch.js:53:3 And then it goes back to the first picture when pressing the mouse. So I'm pretty sure I don't understand theface PROP
and that is causing the troubles.Lastly I'm able to see the full JSON person list in the console because the console log states it. Instead of only showing the name would it be possible to state the whole person[1,2, etc..] list as is shown in the log.
I did the Thimble thingy too.
https://thimbleprojects.org/blckpstv/388718
@GoToLoop how could I set the INTER for (nextidx) instead of mousepressed. Could I use this to change the canvas. I tried putting it instead of mousepressed. But that doesn't work.
I also still didn't get more than 2 images and JSON queries to work yet. Not giving up though :)
This can be done later. For now focus in getting the json+images working together. You can then revert or add the
setInterval()
to do the auto switching for you.This code works for me. I remove the dependency to external resources to demonstrate the logic works. You need to make sure you have access to the images. Update the
console.log()
statement to do further debugging when working with your images.http://p5js.sketchpad.cc/sp/pad/view/2CcgNhDwxQ/latest
Kf
Hello! I did some tweaks so it's got 5 FACES & frameRate() based on INTER + FPS constants:
https://p5js.org/reference/#/p5/frameRate
And no noLoop(), redraw() nor mousePressed() this time. Check it out again: O:-)
https://ThimbleProjects.org/gotoloop/388545https://ThimbleProjects.org/gotoloop/388545/sketch.js
New link: https://Glitch.com/~json-faces-id
why are you posting personal data here? names, addresses, licence plate numbers, usernames and passwords, credit card numbers and codes! what is this?
Hi! @kfrajer The console logs everything correctly!
On reload I get [object Object] for the first to the third idx = 0 - 3. And I see no visible images because I did not call
loadImage()
in thefunction preload()
. Correct?@kfrajer despite that it shows correctly in my console. I don't see any changes in my canvas. I keep getting [object Object] and no pictures.
@koogs its all fake data from faker.js Wouldn't be nice otherwise..
UPDATE nevermind below, either cache or buggy chrome. But on Firefox it works.
@GoToLoop ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^ ^:)^
@GoToLoop Thanks for all the support!! I see your example working perfectly and its exactly the base I need to go further.
Unfortunately mine does it for the half of it. Only shows 3 pictures and 2 JSON queries.
Could I see your JSON file?
I got 5 queries (copied the first two for testing).
console logs this after the second query.
Just for the sake of desperation.. I'll give the JSON file.
I even changed the local server in to an apache and tried 3 different browser...