Can not get copied code to work

Can not get copied code to work
0.0 0

#1

I copied code from the “Get JSON with the jQuery get JSON Method” lesson into codepen and it doesn’t work in codepen. My codepen link is:

The Javascript code is:

$(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
   $.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
       
      // Only change code above this line.
    });
  });

and the HTML code is:

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

#2

You cannot use “/json/cats.json” as url, you have to use a valid url for JSON, with www, https, etc.

Maybe you can use from this api: http://thecatapi.com/


#3

Hi there.

Change:

$(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
   $.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
       
      // Only change code above this line.
    });
  });

To

$(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
   $.getJSON("https://www.freecodecamp.org/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
       
      // Only change code above this line.
    });
  });

The issue is you didn’t specify a valid object path and your code got a 404. Should be fixed now :slight_smile:


#4

Nsuchy,

I tried that new URL: and it still does not work in codepen.

Matt


#5

Have you loaded jQuery? Go to settings/javascript/quick-add and add jQuery.

If it still isn’t working, go to the the browser console (usually ctrl-shft-j or ctrl-shft-i) and see if there is an error there and tell us what it is. The browser console is one of the most useful tools you have.


#6

Kevin, yes jQuery is activated in settings. I said that in my original post, and I gave you a link to my codepen to verify that.

Regarding your second point, control-shift-j gave me the following messages, but I do not know what any of this means:
POST
XHR
http://localhost:27275/command
[HTTP/1.0 500 FAILED 0ms]
An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. YLPMxZ
Image corrupt or truncated. URI in this note truncated due to length. data:R0lGODlhIAAgAPMAAJmZmf///6+vr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs/Ly8vz8/AAAAAAAAAAAACH/C05FVFNDQVB
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-78992f1ed89d5cadb09702e6a0d5bbb0302e85c728c1f8d18fdc8aa56870104c.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)
downloadable font: download failed (font-family: “Telefon” style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff unknown:1:24452
downloadable font: download failed (font-family: “Telefon Black” style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-78992f1ed89d5cadb09702e6a0d5bbb0302e85c728c1f8d18fdc8aa56870104c.woff unknown:1:24055
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-6435f1279663bb84d4a1d8effe0adafbf8499ff6efdd01a59be848c90d8c4c0b.woff2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)
downloadable font: download failed (font-family: “Telefon Black” style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-6435f1279663bb84d4a1d8effe0adafbf8499ff6efdd01a59be848c90d8c4c0b.woff2 unknown:1:24055
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features! YLPMxZ
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.freecodecamp.org/json/cats.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)


#7

OK, I forgot that you had a link to your pen.

The issue here is CORS. It is a frustrating subject, one that will cause you much frustration. Read up on it.

One definition:

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

So FCC has a web site with the data. When the FCC program runs, it has not problem getting access because it is on the same domain. The FCC server can be set up to allow any domain access, not other domains have access, or only a select few. When you call from codepen, it doesn’t recognize your domain and rejects it.

There are a few tricks to get around it, but without documentation of the API, it’s hared to know which one to use. A quick and hacky solution is to use a proxy server like the one below.

$(document).ready(function() {
  $("#getMessage").on("click", function(){
    // Only change code below this line.
    $.getJSON("https://cors-anywhere.herokuapp.com/https://www.freecodecamp.org/json/cats.json", 
              function(json) {
      $(".message").html(JSON.stringify(json));
    });
    // Only change code above this line.
  });
});

Sorry, this may not be the best explanation. It is a complicated subject that I am just getting my head wrapped around. But it should point you in the right direction.


#8

Kevin, thanks for the information.

Your response addresses the situation where I use a FCC API, but does your answer cover the situation where I use the Wikipedia API, which is outside FCC.

I posted another post saying I was unable to get the link for the Wikipedia viewer project (https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&formatversion=2)
to work.

Is your solution the same?

Or is it a different solution?

I tried to post this Wikipedia API problem, but a person called Randell Dawson keeps deleting them as being duplicate and has threatened to block my account as a result.

Matt


#9

The Wikipedia topic has been relisted just now. At first glance it looked like a duplicate of this thread and two others you posted earlier, but I can see it is specific to the Wikipedia project now. Sorry for the confusion.