$.getJSON / API what am I missing here? ... solved!

Sorry about this being my third post about this same topic but I’m really starting to lose my mind with this :slight_smile:

Under is code from FCC tutorial and I’ve changed the JSON source to what is instructed here http://quotes.stormconsultancy.co.uk/api

So the source should be ok and contain valid JSON. Still this code does not seem to work.

What am I missing here?

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("http://quotes.stormconsultancy.co.uk/quotes.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);

      });
    });
  });
</script>

Hi @Ephrino

What are you expecting to happen and what is actually happening?

I tested the code in codepen and it’s fetching the data, formatting it then injecting it into the message div correctly.

Yes, it does work.

CodePen

Hi

Well in the tutorial it makes the information in the JSON file into html format and I can see it on the screen. But after I change the source to this http://quotes.stormconsultancy.co.uk/quotes.json nothing happens, like it couldn’t read it or something

what the hell, now it works (in my pen) also with this source https://gist.githubusercontent.com/dmakk767/9375ff01aff76f1788aead1df9a66338/raw/491f8c2e91b7d3b8f1c8230e32d9c9bc1a1adfa6/Quotes.json%20

dont know how but really glad it does

Hi again.

My code so far:

´´´
$.getJSON(“http://quotes.stormconsultancy.co.uk/quotes.json”, function(json) {
var luku = Math.floor((Math.random() * 44) + 1);
json = json.filter(function(val) {
return (val.id == luku);
});
var html = json.quote + " - " + json.author;
´´´

but the last line does not work it comes out “undefined - undefined”. But I know for a fact that those same json.xxx work on the pen that using as an example.

Any idea why this is?

this works (but the source of JSON is different)

´´´
$.getJSON(“http://quotes.stormconsultancy.co.uk/random.json”, function(json) {

   var html = json.quote + " - " + json.author;

´´´

The problem there is that you have the var html ... outside the callback function, so it won’t have access to the json coming back from the API.

$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function(json) {
  var luku = Math.floor((Math.random() * 44) + 1);
  json = json.filter(function(val) {
  return (val.id == luku);
});
// Outside callback function
var html = json.quote + " - " + json.author;

I think it is still inside the callback

this is the hole code

´´´
$(document).ready(function() {

$("#getMessage").on(“click”, function() {
$.getJSON(“http://quotes.stormconsultancy.co.uk/quotes.json”, function(json) {
var luku = Math.floor((Math.random() * 44) + 1);
json = json.filter(function(val) {
return (val.id == luku);
});
var html = json.quote + " - " + json.author;

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

});
});
});
´´´

for some reason those triple backticks dont seem to work either :sweat:

A back tick should look like this: `

I’m not entirely sure what character that is lol. On windows the back tick key is top left above the tab next to 1, on mac its right of the left shift and next to z.

Also, my mistake, I got confused with the closing brackets from the filter function :stuck_out_tongue:

The reason it’s undefined is because json is an array, so you’ll probably want to do something like:

var html = json[0].quote + " - " + json[0].author;

Oh yeah! now it works. Thanks a lot!!!

1 Like