Resources for JSON?

Could someone please recommend some resources to learn JSON?

The “plug this in” method FCC used to cover JSON doesn’t align with the famous quote APIs I’ve found and is wholly insufficient. I could make the project by just creating the quotes myself but would like to actually learn how to use APIs.

2 Likes

I’m not sure where exactly you are stuck.

Do you have a problem reading the JSON data you receive from your quote API? Is so, then there’s not really much to it. It basically looks like JS object, sometimes nested inside another objects or arrays. The more complicated API, the more nesting you will see. If you find the whole thing really messy and happen to be using Chrome, you can use this tool.

However, if your problem is with navigating the API itself, and creating the proper URL to get the data you want, then the only thing you can do is read documentation. Quote API shouldn’t be that complicated tho.

My problem is I don’t understand the first thing about how to build it. All FCC does is give me this:

$(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        
        json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});
        
        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });

And then it tells me to go build my own, and that template doesn’t work at all with the API documentation I’m seeing for famous quote APIs.

Maybe you could start by looking at what your url returns:

$(document).ready(function() {

      $.getJSON("YOUR URL", function(json) { // json is just a word, you could also say "data"
        
       
        console.log(json);
      
  });
 
});
        
      

after that, see what you want to access more specifically and in the json object and what you want to do with it (append a new div with content, alert(), ?)

I’ve put it elsewhere many times so sorry if it’s redundant for you, but these tutorials have been very helpful:

1 Like

This project doesn’t reflect virtually anything FCC went over, a point made ever apparent by your suggestion that I have to take two other courses to be able to have half an idea of what the hell to do.

The console log returns nothing by the way. Probably because there’s nowhere to place the key.

Actually after I watched the courses I realized the entire logic was in the FCC snippets:

  • it shows how to send a request using a url
  • how to access data in the object that is returned
  • how to do stuff with that data to be displayed on the page.

That’s why I suggested by simply console.logging whatever comes back from your url then try to access stuff inside and see what you can do with it.

For my part I needed the tutorials but since then I can manage a lot more on my own by experimenting with whatever I’m given.

But then again, FCC is not a course :slight_smile:

How is this:

  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        
        json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});
        
        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });

Supposed to enable me to use this:



$.ajax({
    url: 'https://SOMEAPI.p.mashape.com/', // The URL to the API. You can get this in the API page of the API you intend to consume
    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc
    data: {}, // Additional parameters here
    dataType: 'json',
    success: function(data) { console.dir((data.source)); },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "YOUR-MASHAPE-KEY"); // Enter here your Mashape key
    }
});

I’m also stuck on the Random Quote machine and I’ve been doing the Udacity AJAX course as recommended, however I’m still stuck and not understanding enough to complete the projects in that course! Are there any simple general examples that show how the url query looks and how to access specific data in the results? Right now I’m trying to use the NYT API, but the documentation is not very helpful – http://developer.nytimes.com/ Thanks to anyone who may have some tips!

1 Like

Your first snippet shows jquery’s getJSON function (which is just preconfigured $.ajax), that gets you some data (actually from a folder, not from some external site) and processes it somehow.

The second snippet just shows jquery ajax function.

Maybe just show what you have tried so far, it will be easier to put you on the right track.

mmm the NYT api requires an api key and I’m not sure I’ll bother - if you had a link to your code or something I’d be happy to take a look.

That being said I’d probably spend some time console.logging everything until I have an idea of what I’m working with.

Have you seen this in their documentation? that’s really your starting point (sorry if you have):

// Built by LucyBot. www.lucybot.com
var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
url += '?' + $.param({
  'api-key': "YOUR API KEY HERE"
});
$.ajax({
  url: url,
  method: 'GET',
}).done(function(result) {
  console.log(result); // what to do if it succeeded
}).fail(function(err) {
  throw err; // what to do if it failed
});

The issue is that I don’t know JSON or jquery. It’s like the scripting challenges where the answer is a command I’ve never been introduced to before, only this time instead of it being a command it’s an entire language.

Yes, thanks. This is what I’m trying to work with. Sorry if this is a dumb question, where does but the console.log show up? (first time working with a text editor and the browser)

Well, then why don;t you just go with the AJAX course that @timotheap linked for you? I haven’t done it myself, but judging from the list of content, it should at least give you a sense of how to start.

1 Like

That’s what I’m doing.

NEvermind, I found the answer :wink: Thanks!

In your browser it’s Ctrl + Shift + i
(otherwise go into your Browser options > dev tools)
You’ll have something like this:

1 Like

I’m not saying it was obvious to me - hence the links but it’s essentially the same logic: you see a url, and something that’s done when the request succeeds. Go from there, step by step.

Look inside your object, you might see something like :

{ meta: { sky: blue, peach: bad}, article: { something: no, somethinElse: yes}

Can you print the value of “sky” ? (so can you get “blue”?) can you make it appear on your page?

etc.

Not sure if your still looking for resources to learn AJAX but this one really helped me. Tried lots of differents videos but this made it a lot easier to understand. https://learn.jquery.com/ajax/

1 Like

I understand the logic and what’s going on, but there’s a big difference between being able to read and being able to write.

And that’s why we have to projects - really, I’m not taking the piss, that’s when you have to do it that you really start to understand.

The basic steps I suggested may not work for everyone, but they sure do for me: that’s really how I started with Ajax etc, trying to print specific parts of my object.

[EDIT] I haven’t managed Caesar’s Cipher yet but you have. Really, you’ll be ok.