Styling JSON pages - html

Question

I'm working on a JSON API and I want to do something like Facebook's opengraph styling.
The opengraph style indents and breaks lines, how do you go about doing this? If you use styling through HTML or CSS the JSON can not be loaded.

Answer 1

You can use JSON_PRETTY_PRINT which is new in PHP 5.4:
<?php
// Facebook sends a Content-Type of text/javascript
// So I assume you want to too, but you may prefer
// application/json
header('Content-Type: text/javascript');
echo json_encode($data, JSON_PRETTY_PRINT);
?>
If you don't have, or can't upgrade to version 5.4 then you have to find some side of server-side parser.
Edit
I don't know why I assumed you're using PHP when you haven't tagged it. Whatever server side language you're using though you'll want to send out a non-html Content-Type and use new lines and tabs to pretty print it, not HTML.

Answer 2

facebook appear to be using browser detection to format the JSON on the server.
for wget, no formatting is applied:
> wget -q -S -O - http://graph.facebook.com/4
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Cache-Control: private, no-cache, no-store, must-revalidate
Content-Type: text/javascript; charset=UTF-8
ETag: "539feb8aee5c3d20a2ebacd02db380b27243b255"
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
Pragma: no-cache
X-FB-Rev: 526949
Set-Cookie: datr=imJrT4lrhBZ48Mrtw4uYfByk; expires=Sat, 22-Mar-2014 17:34:02 GMT; path=/; domain=.facebook.com; httponly
X-FB-Debug: +gpBLnliDoRvuNtlHIwHASwsDz4pJm9TP3btrrw6AsE=
X-Cnection: close
Date: Thu, 22 Mar 2012 17:34:02 GMT
Content-Length: 172
{"id":"4","name":"Mark Zuckerberg","first_name":"Mark","last_name":"Zuckerberg","link":"http:\/\/www.facebook.com\/zuck","username":"zuck","gender":"male","locale":"en_US"}
but for google chrome, wireshark shows text formatted with spaces and newlines:
{
"id": "4",
"name": "Mark Zuckerberg",
"first_name": "Mark",
"last_name": "Zuckerberg",
"link": "http://www.facebook.com/zuck",
"username": "zuck",
"gender": "male",
"locale": "en_US"
}
(it really is different data - the Content-Length is 210 in this case). note that Content-Type is still text/javascript - they are not rendering into HTML.
so you'd need to use a JSON formatter for whatever language you are using (i guess you are already using a library, so check whether it has a "prettyprint" option or similar). plus, if you want to save bandwidth when formatting seems unimportant, browser (and general context - see Paul's comment) detection from request headers.