jQuery function $.getJSON() doesn't retrieve json file info

jquery

#1

This code works just fine in a coding boot camp environment; the JSON data is retrieved and displays in place of the message tag that initially says “JSON data will go here…”

But, I can’t get this to work in Cloud9.

Any help will be appreciated.

Here is my directory structure:
– index.html
– myScript.js
– cats.json

Here is relevant html:

<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">
      JSON data 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>
  
  <!-- Add to activate jQuery --> 
  <script src="removed link refs here to post in discussion"></script>
  <script src="removed link refs here to post in discussion"></script>
  <script src="myScript.js"></script>

</div>

Here is relevant jQuery.js file

  /*global $*/
    $(document).ready(function() {
      $("#getMessage").on("click", function(){
        // $(".message").html("Here is the message");  
        $.getJSON("cats.json", function(json) {
          $(".message").html(JSON.stringify(json));
        });        
      });
    });

Here is json file data:

/*Cat Photo Finder*/
[{"id":0,
  "imageLink":"removed link refs here to post in discussion",
  "altText":"A white cat wearing a green helmet shaped melon on it's head. ",
  "codeNames":[
      "Juggernaut",
      "Mrs. Wallace",
      "Buttercup"
      ]
 },
 {"id":1,
  "imageLink":"removed link refs here to post in discussion",
  "altText":"A white cat with blue eys, looking very grumpy. ",
  "codeNames":[
      "Oscar",
      "Scrooge",
      "Tyrion"
      ]
 },
 {"id":2,
  "imageLink":"removed link refs here to post in discussion",
  "altText":"A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ",
  "codeNames":[
      "The Doctor",
      "Loki",
      "Joker"
      ]
 }]

#3

What error do you get in browser devtools?

Btw you can use

```
<code>
```

to keep the formatting in markdown messages.


#4

Thank you!

I do not get an error. Simply no information is retrieved.
I know my script is working: instead of the .getJSON() function, I can insert the following line.
$(".message").html(“Here is the message”);

“Here is the message” will display when the button is clicked.

But the .getJSON() function is not functioning; I do not know why.


#5

There must be a network error shown in the browser console.
Could you share the url of your preview where you are testing this?


#6

Thank you!
I did not open the browser console before to check for messages.
But, now I do.
Still there is no error message with original code.

Here are relative directory addressing methods for the cats.json file I have tried

$.getJSON(“cats.json”, function(json) <= no error

$.getJSON("./cats.json", function(json) <= no error

BUT, when I add reference to a nonexistent parent directory

$.getJSON(“nonexistent/cats.json”, function(json) (addresses directory which does not exist), I get this error:

jquery-1.11.2.min.js:4
GET https://preview.c9users.io/breakofday/freeccapp/catPhoto2/noexistent/cats.json 404 (Not Found)

This tells me the script is running and that the .getJSON function IS finding the cats.json file when it is addressed as
cats.json or
./cats.json

But it is not retrieving the data from the json file.

I do not know enough about json files to know what the problem is.

Thank you so much for looking at this.

Here is the url for my preview file.
https://preview.c9users.io/breakofday/freeccapp/catPhoto2/index.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io


#7

It appears that the cats.json file contains invalid syntax. Try removing the comment at the beginning to make it valid, then try again. Also, in order to handle the problem gracefully in the future, try following the documentation at https://api.jquery.com/jQuery.getJSON/ to implement a failure handler, a code path that will run if the JSON is invalid ever again.


#8

Thank you dannytech.

That was it!

And thanks for tip to the documentation.