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
– Dynelight, Commented Apr 8, 2014 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
– Sunny Patel, Commented Apr 8, 2014 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
– T J, Commented Apr 8, 2014 at 18:35
@vp_arth, OP is not using PHP. In Java, before you send the response, you can use response.setContentType("application/json");. — Sunny Patel
– Sunny Patel, Commented Apr 8, 2014 at 19:18

Sunny Patel · Accepted Answer · 2014-04-08 18:38:47Z

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 8, 2014 at 18:38

Sunny Patel

8,0972 gold badges35 silver badges47 bronze badges

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

5 Comments

Sunny Patel Over a year ago

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 Over a year ago

If it's a standalone file, my comment above shows the way to do it in Apache.

Sid Over a year ago

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

Sunny Patel Over a year ago

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?

Sid Over a year ago

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.

vp_arth · Accepted Answer · 2014-04-08 19:20:11Z

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 8, 2014 at 19:20

vp_arth

15k4 gold badges43 silver badges72 bronze badges

21 Comments

Sid Over a year ago

Sorry this could be an absolutely stupid question but where do I add this snippet?

vp_arth Over a year ago

@Sid, you write: I added the JSON Object to my HTML page in the following manner, where you print your html page?

Sid Over a year ago

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.

vp_arth Over a year ago

then my answer is not relevant

vp_arth Over a year ago

is gae a python? or this is SAS?

|

Collectives™ on Stack Overflow

JSON: Create a web page with JSON data

2 Answers 2

5 Comments

21 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

21 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related