Loading...
Logo
Processing Forum
I have a sketch that uses the fantastic json4processing library to get some data from a feed on Xively (www.xively.com).

Ideally, I'd like the sketch to run in javascript mode so that I can visualise the data feed on a website.

But the sketch fails to parse the data from the Xively feed and does nothing.

Has anyone had any success parsing JSON data in a sketch running in javascript mode?

Replies(6)

Json is JavaScript code, so JS has no problem to parse Json data... No need for an extra library for that (Java libraries doesn't work in PJS).
What PhiLho said is correct but if you're using the Processing IDE, it isn't the whole story.  The Processing IDE's Javascript Mode has very specific limitations on how you can mix the Processing API with Javascript core (don't worry, there's good news at the end!).

If you are in a PDE tab and using the Processing API, the only Javascript code you can mix in is simple variable declarations such as:
Copy code
  1. var myVar = 6; 
and functions that do not have any variables passed into them:
Copy code
  1. function someFunction(){
  2.       //some function that
  3.       //you cannot pass in variables into
  4. };
You can however, create a new tab with the name myTab.js.  This tab will have access to all of Javascript, but it will not have access to any of the processing API.  As long as you keep them separate, you can use variables, functions, objects that you create in myTab.js in sketch.pde like so:

In a tab labeled myJavascript.js (note need for .js suffix):
Copy code
  1. var employees = [

  2. { "firstName":"John" , "lastName":"Doe" }, 
  3. { "firstName":"Anna" , "lastName":"Smith" }, 
  4. { "firstName":"Peter" , "lastName": "Jones" }

  5. ];

  6. var myJSONObj = JSON.parse(employees);

  7. function addition(x, y){
  8.   return x + y;
  9. }

Then in a tab called myPDE (no need to add suffix as it's presumed)
Copy code
  1. void setup(){
  2.   noLoop();
  3. }

  4. void draw(){
  5.   println(addition(4, 3)); //prints 7
  6.   println(employees[0].lastName); //prints "Doe"
  7. }

Thanks benj.h.sugar

I can more or less see how that is working but since I have no experience of writing Javascript code can you point me in the direction of a simple tutorial for using it to get JSON data?

I've not managed to work out the syntax for getting the data in the myJavascript tab and passing it to the processing sketch.
unfortunately I don't have the time to write one today, nor to look through lots of tutorials to find a good one.  just a bad day is all, happy to write/look in theory.  JS Mode is always tricky and I don't have the time to debug to the point where I'd be able to tell if it's my code or JS Mode.

i can however tell you what you'll need to learn about and that is AJAX and XMLHttpRequest.  The two go together so searching for an AJAX tutorial will include the XMLHttpRequest.  These two things are so fundamental to web programming that there will be no shortage of tutorials. the other thing to be on the look out for is understanding the asynchronous nature of javascript.  when you make an AJAX request the rest of your code will continue to execute even though the request isn't finished it.  therefore, you'll need to learn a little bit about call back functions as well.

good times, eh?

btw.  you can also use loadStrings() to get json but in PJS you won't be able to put that into a JSONObject so that you can access it's elements very easily.

i'll keep tabs on this thread for sure, hopefully i can come up with something because i'd love to know to!
Thanks for the pointers, I will look into AJAX and XMLHttprequest.
Now I realise that processing in JavaScript mode doesn't work with libraries I think I will have to get my head around some web programming. Pretty much all my sketches rely on one library or another!

Interesting you mention loadStrings because I tried that last night and it works. I was looking at the Xively docs and realised the feed data can be in JSON, XML or csv. So I tried loadStrings and managed to get the sensor float data I was after.

I still want to use a JSON approach as there seems to be more data available so I will post a tutorial somewhere once I figure it out.

Thanks again, the Processing community always amazes me.
no problem.  glad i was able to point you in the right direction.  It's kind of a non-answer answer but sometimes those are helpful when you don't know what you don't know yet.

out of curiosity because I've never actually tried it beyond just loading the json, were you able to use any JSON features to access the sensor data, or did you have to parse the data yourself.