0

So I have a script that gets data from an API I setup. It does this in a loop, but it never repeats because i have a problem with the object it returns.

The script looks like this:

<script>
function loop() {
    var data = loadJSON("http://myapi.com/api"); //(not real API url)
    console.log(data); //Logging this for debugging
    numbers = data.data.split("-");
    console.log(numbers); //Again, for debugging

    //Setting the split data to each variable I that will use later
    a = numbers[0];
    b = numbers[1];
    c = numbers[2];
    d = numbers[3];
    e = numbers[4];

    //Do stuff with the data and then loop again
}
setInterval(loop, 300);
</script>

So the script works fine until I get to the 'data.data.split("-")' part.

The first 'console.log' outputs this:

First console output

wich I recognize as a valid object.

The next 'console.log' doesn't output because I get an error before:

Split() function error

The 'loadJSON' is a function from the library p5.js that I'm using. It outputs an object like it should.

The JSON from the api looks like this, wich I think is valid:

{
    "data": "30-50-300-20-90"
}

So I did my reseach before asking this question and I found that undefined means:

var data = 0; //Defined variable
data = 0; //Undefined variable

And I tried defining the variable before the function and writing 'var' before each variable but I still got the same error.

I also found this. It says that the state of the object is not the same as the one that I log. That means that when I log it has some data but when I try to split() it doesn't have the same data.

At least that's what I understand.

So I did:

console.log(JSON.stringify(data));

And I got:

Empty object

just an empty object.

NOTE: There is a similar question How do I return the response from an asynchronous call?, but my question is different. I know how async works and I don't even have jQuery linked on my html file. This is done with the p5.js library.

If there is any more information you need just comment.

NightOwl888
  • 55,572
  • 24
  • 139
  • 212
Marti157
  • 81
  • 1
  • 7
  • The `console.log()` showing your data after it loaded is a known Chrome issue, referred to as [`console.log()` _lazy evaluation_](https://stackoverflow.com/q/4057440/1541563). The duplicate this is marked as shows you how to rewrite your `loadJSON()` method since it returns a reference to an object that is populated asynchronously. – Patrick Roberts Feb 25 '18 at 12:48
  • The problem is that I can't use jQuery or AJAX in my p5 function as it is limited to p5 (it is the draw() function) wich loops. I would pass variables asynchronously but draw() can't access global variables. Or maybe it can, but I haven't been able. I'm also using Opera, not Chrome. Although maybe the consoles are the same. – Marti157 Feb 25 '18 at 12:51
  • Opera also uses V8, so yes it also has the same issue. The problem isn't about "jQuery vs. p5", it's about understanding asynchronicity. Don't get hung up on "but the duplicate is in jQuery!", just read the answer thoroughly and apply the lesson to your code. It explains the solution and how you can apply it to your situation. – Patrick Roberts Feb 25 '18 at 12:54

0 Answers0