Trouble loading JSON data from a url

wcfcarolina13

I'm not sure why nothing is appearing here.

I'm attempting this tutorial, using Brackets:

This is my code:

function setup() {

  loadJSON("http://" + "api.open-notify.org/astros.json", gotData, 'jsonp');
}

function gotData(data) {
  console.log(data);
}

I get nothing. Well, some errors:

SLint Problems
×
3   Missing 'use strict' statement. loadJSON("http:/ /api.open-notify.org/astros.json", gotData, 'jsonp');
3   Expected 'loadJSON' at column 5, not column 3.  loadJSON("http:/ /api.open-notify.org/astros.json", gotData, 'jsonp');
3   'loadJSON' was used before it was defined.  loadJSON("http:// api.open-notify.org/astros.json", gotData, 'jsonp');
3   'gotData' was used before it was defined.   loadJSON("http:// api.open-notify.org/astros.json", gotData, 'jsonp');
7   Missing 'use strict' statement. console.log(data);
7   Expected 'console' at column 5, not column 3.   console.log(data);
7   'console' was used before it was defined.   console.log(data);

kfrajer

Try using function preload.

Kf

var md;
function preload() {

  loadJSON("http://" + "api.open-notify.org/astros.json", gotData);
}

function gotData(data) {
  console.log(data);
  md=data;
}


function setup(){
      console.log(md);
}

jeremydouglass

This forum mangles code URLs. To work around this in both examples above, separate the protocol and argument strings in your code examples into two strings combined with '+'. This works in both code and forum formatting.

loadJSON("http://" + "api.open-notify.org/astros.json", gotData);

}

koogs

(done)

wcfcarolina13

Hmm there's still a problem. I've coped your code above, still doesn't work. I'm wondering if I haven't imported the libraries correctly, as I've only just started using Brackets. I've tested that url and it isn't broken, it should work in the code.

GoToLoop

http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

"index.html":

<script async src=http://CDN.JSDelivr.net/g/p5.js(p5.min.js+addons/p5.dom.js)></script>
<script defer src=sketch.js></script>

"sketch.js":

/**
 * JSON Open-Notify ISS (v1.0)
 * GoToLoop (2017-May-06)
 *
 * https://forum.Processing.org/two/discussion/22414/
 * trouble-loading-json-data-from-a-url#Item_5
 *
 * http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e
 */

"use strict";

const HTTP = 'http' + '://',
      SITE = 'api.Open-Notify.org/',
      FILE = 'astros.json',
      REMOTE = true,
      PATH = REMOTE && HTTP + SITE + FILE || FILE,
      COLOR = 'blue';

let jsonObject;

function preload() {
  jsonObject = loadJSON(PATH, print);
}

function setup() {
  noCanvas(), noLoop();

  const astroArray = jsonObject.people,
        len = astroArray.length,
        issCrewNames = Array(len);

  for (let i = 0; i < len; issCrewNames[i] = astroArray[i++].name);
  print(issCrewNames);

  for (const crew of issCrewNames)  createP(crew.bold().fontcolor(COLOR));
}

GoToLoop

Alternative version 2.0: :bz
http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

/**
 * JSON Open-Notify ISS (v2.0)
 * GoToLoop (2017-May-06)
 *
 * https://forum.Processing.org/two/discussion/22414/
 * trouble-loading-json-data-from-a-url#Item_6
 *
 * http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e
 */

"use strict";

const HTTP = 'http' + '://',
      SITE = 'api.Open-Notify.org/',
      FILE = 'astros.json',
      REMOTE = true,
      PATH = REMOTE && HTTP + SITE + FILE || FILE,
      COLOR = 'green';

let jsonObject;

function preload() {
  jsonObject = loadJSON(PATH, print);
}

function setup() {
  noCanvas(), noLoop();
  
  createDiv(''.fontcolor(COLOR).bold().big());

  const astroArray = jsonObject.people,
        len = astroArray.length,
        issCrewNames = Array(len),
        elem = select('font');

  for (let i = 0; i < len; issCrewNames[i] = astroArray[i++].name);
  print(issCrewNames);

  for (const crew of issCrewNames)  createP(crew).parent(elem);
}

GoToLoop

And now version 3.0, using ol + li w/ style(): O:-)
http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

/**
 * JSON Open-Notify ISS (v3.0)
 * GoToLoop (2017-May-06)
 *
 * https://forum.Processing.org/two/discussion/22414/
 * trouble-loading-json-data-from-a-url#Item_7
 *
 * http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e
 */

"use strict";

const HTTP = 'http' + '://',
      SITE = 'api.Open-Notify.org/',
      FILE = 'astros.json',
      REMOTE = true,
      PATH = REMOTE && HTTP + SITE + FILE || FILE,
      COLOR = 'OrangeRed';

let jsonObject;

function preload() {
  jsonObject = loadJSON(PATH, print);
}

function setup() {
  noCanvas(), noLoop();

  const astroArray = jsonObject.people,
        len = astroArray.length,
        issCrewNames = Array(len),
        ol = createElement('ol');

  ol.style('color', COLOR)
    .style('font-weight: bold')
    .style('font-size: 1.2em');

  for (let i = 0; i < len; issCrewNames[i] = astroArray[i++].name);
  print(issCrewNames);

  for (const crew of issCrewNames)  createElement('li', crew).parent(ol);
}

wcfcarolina13

This is advanced for me, thank you for these solutions. Can you explain why you broke up the url like this?:

const HTTP = 'http://',
      SITE = 'api.Open-Notify.org/',
      FILE = 'astros.json',
      REMOTE = true,
      PATH = REMOTE && HTTP + SITE + FILE || FILE,
      COLOR = 'blue';

GoToLoop

• Just in case if I decided to post it w/ only 4 indention, it wouldn't get mangled by the forum. 8-X
• But in the end, I've posted all 3 versions inside <pre lang=js></pre> tags. ;;)
• Also to have the option to load "astros.json" locally, setting REMOTE to false, if I wished so. :)>-

P.S.: Looking at your post, seems like just http:// is already enough to get mangled. 3:-O
Guess I'm gonna need to split it as well now in order to avoid mangling: const HTTP = 'http' + '://' :-<

GoToLoop

Here's a similar online example using createP() for displaying weather info: :bz
http://Bl.ocks.org/GoSubRoutine/5fbc03e019c53254a2ba7e7fd3318b45

wcfcarolina13

By Jove it works! I'm unpacking your first version, it works in Brackets. Just an observation, isn't it a little inefficient to have to do this sort of thing with every url in every post in this forum? How often is this forum visited?

GoToLoop

Well, I try to post readable code not only for the OP, but for any other probable visitors in the future. $-)

And when feasible, a runnable online version in order to prove my examples indeed work! >-)

wcfcarolina13

I appreciate it.

kfrajer

@GoToLoop

Could you comment on the jsonpOptions in your code please:

jsonObject = loadJSON(PATH, print);

The reference did not provide any details. I am curious about what other options are there and what does you code do: https://p5js.org/reference/#/p5/loadJSON

Kf

GoToLoop

At my loadJSON(PATH, print), 1st parameter is a path string; and 2nd is a callback function. :-B

kfrajer

@GoToLoop

I don't see the call back function. You use the json data available directly from the handler you setup in preload. Am I missing something?

Kf

GoToLoop

print() is a p5's method: https://p5js.org/reference/#/p5/print
So I can use it as a function callback success argument for loadJSON(). B-)

GoToLoop

BtW, here's another example, but w/ loadXML() instead: ;;)
xml = loadXML(REMOTE && URI || FILE, print, console.warn);

https://forum.Processing.org/two/discussion/22668/issue-loading-xml-feed-in-p5js#Item_4

http://p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC/latest

https://p5js.org/reference/#/p5/loadXML

kfrajer

:-bd Really neat. Thank you for your demos.

Kf