Need help with getJSON method

1

So I tried using getJSON method for random quote machine project but I couldn’t implement it. So I got around using getJSON by creating an array of quotes and picking from that array randomly. Now that I am working on weather app project I do need to use getJSON. For some reason, all my requests are failing and I am probably missing a fundamental point. So I wrote the following basic method. Can anyone tell me what I am missing?

JS:

$(document).ready(function(){
\n$(“button”).on(“click”, function(){
$.getJSON(“http://www.freecodecamp.com/json/cats.json”).done(function(json){
$("#json-data").text(“JSON: " + JSON.stringify(json));
}).fail(function(){
$(”#json-data").text(“FAILED”);
});
});
});

In the html file I only have a button and a p tag with id “json-data”

Thank you very much!

2

Try showing your code this way so that it can be read a lot easier.

$(document).ready(function(){
  $("button").on("click", function(){
    $.getJSON("http://www.freecodecamp.com/json/cats.json").done(function(json){
      $("#json-data").text("JSON: " + JSON.stringify(json));
    }).fail(function(){
      $("#json-data").text("FAILED");
    });
  });
});
3

Is this the data you are trying to access?

[
  {
    "id": 0,
    "imageLink": "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
    "altText": "A white cat wearing a green helmet shaped melon on it's head. ",
    "codeNames": [
      "Juggernaut",
      "Mrs. Wallace",
      "Buttercup"
    ]
  },
  {
    "id": 1,
    "imageLink": "https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg",
    "altText": "A white cat with blue eys, looking very grumpy. ",
    "codeNames": [
      "Oscar",
      "Scrooge",
      "Tyrion"
    ]
  },
  {
    "id": 2,
    "imageLink": "https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg",
    "altText": "A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ",
    "codeNames": [
      "The Doctor",
      "Loki",
      "Joker"
    ]
  }
]
4

Yes, I think so. I am trying to access ANY kind of data. I used that because it was part of the tutorials.

5

It might be a problem with the link you are using.

6

I picked a random json gist from github and applied the url.
I tried it with both .ajax and .getJSON; both work with the new url.

USING: $.getJSON()

$(function() {
var url = 'https://gist.githubusercontent.com/kaybray12/8dd867de536b622ed6c6d5af9bce0eb0/raw/686b991ef4be36f20d83f478229f8df7335f58a6/gallery.json'
  $.getJSON(url, function(data) {
    $('#json-data').append(JSON.stringify(data))
  });
});

USING: $.ajax()

$(function() {
  var url = 'https://gist.githubusercontent.com/kaybray12/8dd867de536b622ed6c6d5af9bce0eb0/raw/686b991ef4be36f20d83f478229f8df7335f58a6/gallery.json'
  $.ajax({
    url: url,
    dataType: 'json',
    success: function(data) {
      $('#json-data').append(JSON.stringify(data))
    }
  });
]);

Hopefully this helps you out.