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>
Get the response of the URL using urlopen(). Convert it to a JSON response using json. loads(). Display the generated JSON response.
Declare a JSON object and store it into variable. Use JSON. stringify(obj) method to convert JavaScript objects into strings and display it.
Using the JSON stringify method you can Display raw JSON data in HTML.
Use alert(JSON.stringify(data));
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With