Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using JavaScript to get JSON response and display on the webpage, testing JavaScript

I'm trying to create a JS app with the following functionality: A button that gets a JSON document and displays that text. I'm going through an Elasticsearch tutorial, and there is indeed valid JSON at the url I provide:

{"_index":"planet","_type":"hacker","_id":"xfSJlRT7RtWwdQDPwkIMWg","_version":1,"exists":true, "_source" : {"handle":"mark","hobbies":["rollerblading","hacking","coding"]}}

When using the code below...I get an alert of

[object Object]

instead of an alert with the full JSON. I'm planning to take the steps next of actually selecting part of the JSON, but I'd like to at least see the full document first...

Any ideas? Thank you in advance!

<!DOCTYPE html>
<html lang="en">
<head><title>Demo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /></head>

<body>
  <input id="testbutton" type="button" value="Test" />
  <p id="results">results appended here: </p>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#testbutton").click(function() {
        $.ajax({
            url: 'http://localhost:9200/planet/hacker/xfSJlRT7RtWwdQDPwkIMWg',
            dataType: 'json',
            success: function(data) {
                $("#results").append('all good');
                alert(data);
            },
             error: function() {
                $("#results").append("error");
                alert('error');
            }
        });
    });
});
</script>
</body>
</html>
like image 552
allstar Avatar asked Jul 28 '13 21:07

allstar


People also ask

How do I get JSON data from a website?

Get the response of the URL using urlopen(). Convert it to a JSON response using json. loads(). Display the generated JSON response.

How do I display a JSON object?

Declare a JSON object and store it into variable. Use JSON. stringify(obj) method to convert JavaScript objects into strings and display it.

Which syntax is used for displaying JSON data on a view?

Using the JSON stringify method you can Display raw JSON data in HTML.


2 Answers

Use alert(JSON.stringify(data));

like image 84
kul_mi Avatar answered Oct 27 '22 14:10

kul_mi


jQuery tries to "best guess" the data format it receives, and parse it for you.

That's exactly what you're seeing. jQuery has already parsed the JSON into an object for you. To see the JSON representation, you can stringify the data again;

alert(JSON.stringify(data));

... or, you can tell jQuery not to parse the response in the first place, passing dataType: "string" as one of the options. data will then be the JSON representation, and you'll have to JSON.parse(data) to turn it into an object.

like image 37
Matt Avatar answered Oct 27 '22 13:10

Matt