JSON: Create a web page with JSON data

Question

Firstly, I am extremely new to JSON. I have been reading as much as I can on it. While I get the concept, implementing it is a different deal altogether for me.

So, I have an app which reads and displays data from JSON web pages. For instance, I can extract the time that is being shown in this website: http://date.jsontest.com/

Using the HTML from this website, I added the JSON Object to my HTML page in the following manner:

<html>
<body>
<pre>
{
   "score": "30-20"
}
</pre>
</body>
</html>

However, the app now throws a JSON exception everytime I try to retreive the score.

My question is, 'Is adding a JSON Object to the pre tag in an HTML page the correct way of creating a JSON Object on a web page?'

If not, what is the correct way to do it?

EDIT: This is is the code I am using in java to retrieve the JSON data:

    StringBuilder url = new StringBuilder(URL);
    HttpGet get = new HttpGet(url.toString());
    HttpResponse r = client.execute(get);
    int status = r.getStatusLine().getStatusCode();
    if(status==200){
        HttpEntity e = r.getEntity();
        String data = EntityUtils.toString(e);
        //JSONArray timeline = new JSONArray(0);
        JSONObject last = new JSONObject(data);
        return last;
    }
    else{
        Toast.makeText(this, "Error", Toast.LENGTH_SHORT).show();
        return null;
    }

The try statement:

try {
            json = lastTweet();
            return json.getString("time");
            //return "Oh Well";
        }

Thanks.

A JSON file only has the JSON markup. No need to add HTML tags. How are you trying to retrieve the score? — Dynelight, Apr 08 '14 at 18:32
Along with having only JSON markup, it's proper for the server to send the `Content-type: application/json` header to signify the type. — Sunny Patel, Apr 08 '14 at 18:35
You need a javascript object withing the window scope or just want to display it in the page as text? — T J, Apr 08 '14 at 18:35
See at [your link](http://date.jsontest.com/) in the source. It's clean json without any html wrapping. Also good to provide `Content-type: application/json` header with it — vp_arth, Apr 08 '14 at 18:36
@Dneylight: I pass the URL to my app and use the JSONParser to retrieve data. — Sid, Apr 08 '14 at 18:45
@vp_arth: but when I press F12 at the source, it shows me html data. That was the one I used — Sid, Apr 08 '14 at 18:46
@Sid: No. You can name your file `.json` file type, and have your server send out the header automatically. So with Apache, in your `.htaccess` file, you could just add the line `AddType application/json .json` in it. — Sunny Patel, Apr 08 '14 at 18:47
@Sid, you're view browser generated DOM, see on the Network tab, there are response headers also — vp_arth, Apr 08 '14 at 18:52
@vp_arth: Am I doing something wrong? I hit F12 on Chrome and Firefox and my network page shows up blank. — Sid, Apr 08 '14 at 19:01
Is the first block of Java your `lastTweet()` function? If so, you shouldn't need a try block, and just check for a the `null` return value. — Sunny Patel, Apr 08 '14 at 19:07
@vp_arth: Sorry about that. I see it now. Thank you. How can I now make my HTML page look like that? I mean, my page does look like the example I provided but it doesn't seem to act like it because of the aforementioned points from everyone who helped so far. — Sid, Apr 08 '14 at 19:07
@LaughDonor: Yes it is. I just read it from a tutorial and used a code that was pretty much similar to it. — Sid, Apr 08 '14 at 19:09
@Sid, php: `header('Content-type: application/json'); echo json_encode(array('data'=>'test'));exit;` — vp_arth, Apr 08 '14 at 19:14
@vp_arth, OP is not using PHP. In Java, before you send the response, you can use `response.setContentType("application/json");`. — Sunny Patel, Apr 08 '14 at 19:18

score 1 · Answer 1 · answered Apr 08 '14 at 18:38

1

Your application should send the Content-type: application/json header and should only output the string representation of the data itself, so that your entire page is just:

{
   "score": "30-20"
}

and nothing more. The example that you gave follows the same procedure if you check the response headers and view the source code of that page.

The reason your parser is failing is because the page starts with <, when the first non-whitespace character should be {.

answered Apr 08 '14 at 18:38

Sunny Patel

7,830
2
31
46

If you're using PHP, and you have a PHP Associative Array `$data` to send, it's as simple as `header('Content-type: application/json'); echo json_encode( $data );`. – Sunny Patel Apr 08 '14 at 18:42
If it's a standalone file, my [comment](http://stackoverflow.com/questions/22945416/json-create-a-web-page-with-json-data?noredirect=1#comment35030555_22945416) above shows the way to do it in Apache. – Sunny Patel Apr 08 '14 at 18:49
Here's what I aim to do though. I will be posting score updates and my application will pull data from a website. I will have my website displaying the scores. So how, if it is possible, can I create a web page with these JSON score Objects? Or is Apache the only way to do it? Thanks – Sid Apr 08 '14 at 18:52
You haven't specified how your application is pulling the data, a language would be a good start. Is your application saving them as an individual file periodically, or is it a server sided script which makes the call whenever a user requests for it? – Sunny Patel Apr 08 '14 at 18:54
Ah sorry about that. I'm using java to pull the data. I have added the code to the question. The client will keep trying to get the JSON data that is present in the said URL. So I will add a score update to my web page and the app will store all the updates in an Array. – Sid Apr 08 '14 at 19:00

score 1 · Answer 2 · answered Apr 08 '14 at 19:20

1

Use something like this:

response.setContentType("application/json");
PrintWriter out = response.getWriter();
String json = "{\"data\": \"test\"}";
out.print(json);
out.flush();

on your dataserver

answered Apr 08 '14 at 19:20

vp_arth

14,461
4
37
66

Sorry this could be an absolutely stupid question but where do I add this snippet? – Sid Apr 08 '14 at 19:30
@Sid, you write: `I added the JSON Object to my HTML page in the following manner`, where you print your html page? – vp_arth Apr 08 '14 at 19:33
I am using google app engine to deploy my HTML page to the web. Of course, that is causing problems. So, like you guys pointed out, I stopped trying to deploy an HTML file and deployed a JSON file instead. The problem now is that whenever I try to go to the website, it just ends up downloading a random file to my machine. – Sid Apr 08 '14 at 19:52
then my answer is not relevant – vp_arth Apr 08 '14 at 19:53
is **gae** a python? or this is SAS? – vp_arth Apr 08 '14 at 19:54
I have a feeling my question is all over the place. I'm extremely sorry about that. To make it short now, how can I host a json object that I am creating? – Sid Apr 08 '14 at 19:55
I see about python and GAEngine [here](http://stackoverflow.com/questions/12664696/how-to-properly-output-json-with-app-engine-python-webapp2) – vp_arth Apr 08 '14 at 19:56
As for your question, gae is python. – Sid Apr 08 '14 at 19:56
Then link above should be helpful :) – vp_arth Apr 08 '14 at 19:57
OMG! It worked after I changed from deploying a .html to a .json My only concern/hope now is that it isn't downloading the file like it does on my desktop. – Sid Apr 08 '14 at 19:57
About the page you linked me to, do you have any idea where I need to put that code in? – Sid Apr 08 '14 at 20:03
if you run the python server on your local machine, you can edit its code.., – vp_arth Apr 08 '14 at 20:08
it is not for files serving, this need if you have more dynamic content – vp_arth Apr 08 '14 at 20:09
Thing is, I will be updating a webpage with live commentary in the form of JSON OBjects. And my application will read the JSON objects and will provide the end user with the commentary. Any solution to achieve that? I am willing to use any software/service, – Sid Apr 08 '14 at 20:27
I don't know what are you want, I can write small python/php/nodejs/Java/C/C++ API server which will serve JSON data, but I need not to know something about GoogleAppEngine for this) – vp_arth Apr 08 '14 at 20:28
it is HTTP, your users should ping your server for changes, or should stay connected(long-pooling, websockets or sockets w/o HTTP) – vp_arth Apr 08 '14 at 20:31
oh, also you can use GCM to notify they about new data exists)) – vp_arth Apr 08 '14 at 20:34
Oh really? I didn't I could do that with GCM, I thought I would have to make the app refresh automatically every 2 mins. Also, eventually what has fixed it for me, is using a .json file instead of a .html The parser does not download any extra content and displays the JSON content correctly. Thank you very much for your help with this. I really appreciate it. – Sid Apr 08 '14 at 20:35
For the push notification, I have used Urban Airship but considering the issues I have been having with these web services, I might just try to learn some GCM. – Sid Apr 08 '14 at 20:40
GCM is as ApplePNS for android devices) – vp_arth Apr 08 '14 at 20:41
Urban Airship is service collector, as a Amazon SNS.. it proxies you to GCM and APNS – vp_arth Apr 08 '14 at 20:44

JSON: Create a web page with JSON data

2 Answers2