Json doesn't validate

JavaScript
1

why does this JSON not validate in JSON Lint?


[COLOR=#464646]callback({[/COLOR]
[COLOR=#464646]"stores": [[/COLOR]
[COLOR=#464646]{[/COLOR]
[COLOR=#464646]"name": "sites",[/COLOR]
[COLOR=#464646]"content": [[/COLOR]
[COLOR=#464646]{[/COLOR]
[COLOR=#464646]"link_text": "link",[/COLOR]
[COLOR=#464646]"link_src": "http://www.store1.com/"[/COLOR]
[COLOR=#464646]},[/COLOR]
[COLOR=#464646]{[/COLOR]
[COLOR=#464646]"link_text": "link",[/COLOR]
[COLOR=#464646]"link_src": "http://www.store2.com/"[/COLOR]
[COLOR=#464646]},[/COLOR]
[COLOR=#464646]{[/COLOR]
[COLOR=#464646]"link_text": "link",[/COLOR]
[COLOR=#464646]"link_src": "http://www.store3.com/"[/COLOR]
[COLOR=#464646]},[/COLOR]
[COLOR=#464646]{[/COLOR]
[COLOR=#464646]"link_text": "link",[/COLOR]
[COLOR=#464646]"link_src": "http://www.store4.com/"[/COLOR]
[COLOR=#464646]},[/COLOR]
[COLOR=#464646]{[/COLOR]
[COLOR=#464646]"link_text": "link",[/COLOR]
[COLOR=#464646]"link_src": "http://www.store5.com/"[/COLOR]
[COLOR=#464646]},[/COLOR]
[COLOR=#464646]{[/COLOR]
[COLOR=#464646]"link_text": "link",[/COLOR]
[COLOR=#464646]"link_src": "http://www.store6.com/"[/COLOR]
[COLOR=#464646]}[/COLOR]
[COLOR=#464646]][/COLOR]
[COLOR=#464646]}[/COLOR]
[COLOR=#464646]][/COLOR]
[COLOR=#464646]});[/COLOR]

thank you…

2

Because it’s wrapped in a callback, which is valid JS but not JSON:

callback(
  // Valid JSON
);

If you strip away the callback code, everything else validates correctly.

3

ok… thank you very much…

I still find JSON so confusing… I wish we were all still just using XML…:wink:

so: is this “callback” thingie relevant for when I pull this JSON with jQuery/AJAX?

thank you…

4

You don’t need the wrapper for normal JSON, but if you want to request data from a different domain to the one your JS is running from, you have to use what’s called JSONP. It’s a way of getting around the same origin policy. There’s a good explanation over at wikipedia: http://en.wikipedia.org/wiki/JSONP

5

ok, so JSONP is only for when you’re pulling from a remote domain?

that “callback” thingie is only necessary for JSON feeds that will be accessed remotely?

I’ve dabbed a bit in pulling from public JSON feeds… for example…

http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?

it’s wrapped in parenthesis, is this what you mean? (it doesn’t have the world “callback”, but it looks like it’s the same thing… is this correct?)

thank you…

6

Yeah, you can call the function whatever you want… some people name it callback, but that’s just a matter of preference. In the flickr URL you gave, you can change the name of the callback function by changing this part of the query string: &jsoncallback=foobar (try this and you’ll see that the returned JSON is wrapped in a call to the function foobar).

7

actually, this public JSON,

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json

is not wrapped in a “callback” thingie… it’s not wrapped in parenthesis…

so I guess I’m confusing the “callback” that’s part of JSON address url (when you call it with JSONP) and this “callback” word that, in some cases, I guess, wraps public JSON feeds…

thank you…

8

JSON is nothing more than data contained within an object notation, so that different types of data structures can be represented.
With JSONP, that wraps the same data with a function name of your choice, so that once it has been retrieved in to a script tag, that function name executes with that data. As said before, it’s a work-around to allow you to obtain that data from some other origin.

It’s no more complex than that :slight_smile:

9

yes… it’s data contained within an object notation, that can get very complex as you can nest arrays in objects and objects in arrays… yes? :wink:

here are three JSON examples:

{
    "users": [
        {
            "firstName": "Ray",
            "lastName": "Villalobos",
            "joined": {
                "month": "January",
                "day": 12,
                "year": 2012
            }
        },
        {
            "firstName": "John",
            "lastName": "Jones",
            "joined": {
                "month": "April",
                "day": 28,
                "year": 2010
            }
        }
    ]
}

{"skills": {

	"web":[
		{"name": "html", 
		 "years": "5"
		},
		{"name": "css", 
		 "years": "3"
		}],
		
	"database":[
		{"name": "Oracle", 
		 "years": "3"
		},
		{"name": "MySQL", 
		 "years": "4"
		}]
}}

this one doesn’t have a name…

{
	"header": "List of Books",
	"theBooks" : [
		{ "title": "title-1",
			"author": "author-1" },
		{ "title": "title-2",
			"author": "author-2" }
        ]
}

this is the fundamental problem I have with JSON: each JSON is structured so differently, that I can’t find a formula for parsing them that servers for all of them…

$.getJSON('json/skills.json', function(data) {

“data” is always the entire JSON, right? the entire object? just as I posted them here?

but then, how you parse is very different for each one of the three examples I have posted here… yes?

I do know that objects are lists of key-value pairs and are always wrapped in ‘{}’; and that arrays are just lists of values and are always wrapped in ‘’
(but you can have arrays inside objects and vice-versa, right? the nesting can be endless…:wink:

would very much appreciate some comments and insights from folks much wiser than I am…:~)

thank you very much…

10

It’s no different from XML in that respect - you still need to know the schema of the data that is returned, and each API tends to be different.

11

This is why there tends to be a standard schema that each one uses. Flickr for example, has documentation on how they would expect you to interpret the information from them.

12

thank you Paul…

ok, I think I’m FINALLY starting to GET IT…:slight_smile:

the KEY is whether you’re looping thru an array or thru an object… I’m very clear about that now…
(at least as it works with jQuery $.each() method…)

and: and array is not always just a list of values, it can be a list of objects too… as in this example:

http://mayacove.com/dev/json/users.html

in which “users” contains just one array that contains two objects…

I just parsed this on my own from scratch…

I would appreciate some comments on my code…:slight_smile:

(I don’t get why the <h1> is appearing after the JSON content… (??)

thank you very much…

13

Because you’re calling $('body').append() which is adding the H1 as the last item inside the body tag (after div#users). To insert the H1 before the content, use $('body').prepend()