Trouble loading JSON data from a url

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);

Answers

  • edited May 2017

    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);
    }
    
  • edited May 2017

    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);
    

    }

  • (done)

  • edited May 2017

    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.

  • edited May 2017 Answer ✓

    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));
    }
    
  • edited May 2017

    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);
    }
    
  • edited May 2017

    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);
    }
    
  • 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';
    
  • edited May 2017
    • 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' + '://' :-<

  • edited May 2017

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

  • 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?

  • edited May 2017

    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! >-)

  • I appreciate it.

  • @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

  • edited May 2017

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

  • @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

  • 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-)

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

    Kf

Sign In or Register to comment.