How to load JSON basic

Question

I posted this question to understand why this works with Gravatar and not in a typical production environment. The answer was simple but something I overlooked because I am new to working with JSON and assumed the issue was my understanding of it. This forum was absolutely no help in understanding that Gravatar's back-end is simply using server side script to output Javascript when the callback is used and plain JSON when only the URL to the JSON is accessed. Thus making this script work, because it is script being output.

Although the first part of the question was responded to, and helpful, the later part of discovering how this was possible with Gravatar was completely ignored. Because only half of this question was commented on, I would like this thread removed. Thanks.

I have been working with some JSON projects and I continue to run into an error, time and again.

Uncaught SyntaxError: Unexpected token :

The index.html is as follows

<!doctype html>
<html>
  <head>
    <title>JSON</title>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
    <meta http-equiv="content-language" content="es"/>
    <script type="application/javascript" async="true" defer="true" src="script.js"></script>
    <script type="application/javascript" async="true" defer="true" src="flag.json?callback=pFlag"></script>
  </head>
  <body>
  </body>
</html>

script.js

function pFlag(data){
  console.log(data);
}

flag.json

{"flag":{"color":"green"}}

I have another project using these same principle that does not produce this error.

http://lib.richardkentgates.com/gravacon/

What gives?

Marc B · Accepted Answer · 2016-02-09 20:31:46Z

4

Never going to work like that. you're loading your flag.json as an external script, which means the file has to contain valid JS code. What you have is not actual code, it's just a JS value definition. External scripts must basically be the contents of a <script> tag block, WITHOUT the script tag. e.g

var foo = {"flag":{"color":"green"}};

would work.

Given the callback business in your url, you're probably trying to do a JSONP-type request, which means flag.json should actually contain this:

pFlag({"flag":{"color":"green"}})

answered Feb 9, 2016 at 20:31

Marc B

362k44 gold badges433 silver badges508 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JAAulde Over a year ago

I second the JSONP portion of this answer. JSONP requires a supporting distant end (to wrap the JSON output in a call to the named function), and cannot work with a direct request to a static JSON file.

Richard Over a year ago

So then neither of you have looked at the example I posted. This is exactly the way Gravatar provides it's data. Please look at the functioning example I posted and not just cherry pick the question.

Marc B Over a year ago

then perhaps you should go look at your own example as well. your gravatar <script> is NOT returning a bare json value. it's returning properly formed JSONP, which is the ONLY way such a thing could possibly work. just because the url being used has .json in it doesn't mean you're hitting a json file. filename extensions in urls are utterly MEANINGLESS. a webmaster could rename all their .html files to .exe and serve up http://example.com/runme.exe. that doesn't mean you're running an executable on that server...

Richard Over a year ago

@MarcB ok, I think you get the purpose of this post. I would really appreciate if you could expand on this a little. I don't see any structural difference in the JSON v JSONP schema and I have tried to output the application/json and application/javascript headers in my .htaccess. So how is Gravatar making this happen? I would really appreciate some pointers here. Both so I can understand what they are doing and the best way to properly load JSON data to be worked with post page load. Thanks in advance. Please keep CORS restrictions in mind.

Marc B Over a year ago

jsonp is literally just the text of a a JS function call, somefunc(somejson). that's it. your file contains ONLY somejson, which is not valid. go read what jsonp is - you're not using it correctly.

|

elixenide · Accepted Answer · 2016-02-09 20:32:22Z

1

The problem is in this line:

<script type="application/javascript" async="true" defer="true" src="flag.json?callback=pFlag"></script>

JSON is based on a subset of JavaScript, but it is not actually JavaScript. You cannot call your .json file as a script (i.e., using a <script> tag). Instead, you should load it using AJAX.

answered Feb 9, 2016 at 20:32

elixenide

44.9k16 gold badges79 silver badges103 bronze badges

Collectives™ on Stack Overflow

How to load JSON basic

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related