Get JSON response at javascript

Question 1

I'm answering a certain request to my Django server with a JSON object:

return HttpResponse(json.dumps(geojson), mimetype="application/json")

But I don't know how to get it at the HTML/javascript. I have gone through lots of similar questions and tutorials, but they all start defining an string variable with an example of JSON to use it. But I haven't been able to find how to get the JSON the server is answering me.

Any help or tutorial link?

EDIT: I tried using jQuery.ajax as suggested, but the function is never being executed:

Content of map-config.js:

var jsondata;
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
 map = new OpenLayers.Map( 'map' );
 layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
 "http://vmap0.tiles.osgeo.org/wms/vmap0",
 {layers: 'basic'} );
 map.addLayer(layer);
 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
 var geojson_format = new OpenLayers.Format.GeoJSON();
 var vector_layer = new OpenLayers.Layer.Vector(); 
 map.addLayer(vector_layer);
 vector_layer.addFeatures(geojson_format.read(jsondata)); // Feeding with the json directly
}
$.ajax({
 url: "localhost:8000/form/",
 type: "POST",
 dataType: "json"
}).done(function (data) {
 $("#dialog").dialog('Hello POST!');
 console.log(data);
 jsondata = data; // Saving JSON at a variable so it can be used with the map
});

I also have another js file for a form, which works properly. And the HTML file is this one:

<html>
<head> 
 <script src="{{STATIC_URL}}js/jquery-1.9.1.js"></script>
 <script src="{{STATIC_URL}}js/jquery-ui-1.10.3.custom.js"></script>
 <script src="{{STATIC_URL}}js/OpenLayers.js"></script>
 <script src="{{STATIC_URL}}js/form.js"></script>
 <script src="{{STATIC_URL}}js/map-config.js"></script>
 <link rel="stylesheet" href="{{STATIC_URL}}css/jquery-ui-1.10.3.custom.css">
 <link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css">
</head>
<body onload="init()">
 <div id="form" class="form-style">
 <p>Start Date: <input type="text" id="id_startDate"></p>
 <p>
 <label for="amount">Interval:</label>
 <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
 </p>
 <p> <div id="id_interval"></div> </p>
 <p>
 <button id="id_okButton">OK</button>
 </p>
 </p>
 </div>
 <div id="map" class="smallmap">
</body>

So, when the POST request is received with the json coming from server, the jQuery.ajax method should execute, and the map should show some data (draw polygons over it to be exact). That POST is arraiving OK as stated at FireBug (the snapshot is not showing the whole json object, which is big):

JSON response snapshot at FireBug

Question 2

possible duplicate of Reading Server Side file with Javascript

Question 3

I don't think that question has anything to do with this one

Question 4

You have an HTTP resource. You want to read it with JavaScript. That question has everything to do with this one.

Question 5

No, I disagree, because it's talking about a csv which is an accesible static resource, meanwhile I'm dealing with a dynamic resource which comes into a POST request response. Accepted answer there has even nothing to do with porposed answers here.

Question 6

It's data available via a URL. That fact that it is dynamic instead of static is irrelevant (the client can't tell the difference). The fact that is is JSON instead of CSV isn't relevant (at least in so far as your question is expressed since you were only asking about getting the data, not parsing it). Until you edited the question a few minutes ago, there was no mention of it being POST.

Question 7

Did you serialize your object to json format ?

 $.ajax({
 url: //your_url,
 type: "POST",
 success: function (data) {
 // write your parsing code..
 }
 },
 error: function (err) {
 }
 });

exp json from w3schools.com

{
"people": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

parsing exp (in jquery ajax success function ):

$.each(data.people, function (i, person) {
 console.log(person.firstName + " " + person.lastName)
});

Question 8

Please use a comment for questions.

Question 9

I don't know if I need to: It is a geoJSON generated with django libraries, I guess it is already serialized, isn't it? Anyway that's not the problem I'm trying to solve now

Question 10

First write your request url to browser address bar to see json data. If it is ok you can use jquery ajax function for parsing json data.

Question 11

@erkandemir how can I do that?

Question 12

@erkandemir Ok I think I understand the problem: this function SENDS a POST request to the server, and IF SUCCEEDS, then does something with the response data. But I already have the first part coverend in a different way. I just need to catch the response. Is there any function that executes whenever a post request is received without having to send anything before?

Question 13

You could use jQuery for the request on the browser side.

$.ajax({
 url: "example.com/data",
 dataType: "json"
}).done(function (data) {
 // data is the javascript object from the json response
});

Edit: Linked to the wrong jQuery call.

See details

Question 14

I've tried this using localhost:8000/form as my url and just using console.log(data), but nothing is being printed. Doesn't seem to work

Question 15

@Roman Rdgz: Does your browser show the JSON when you open localhost:8000/form? For suggest that the server expects a POST request, as the default method for $.ajax is GET.

Question 16

The server is receiving the POST for sure. And I can see the JSON response at firebug, so it arrives to the browser. But I see no way of accesing it. I'm afraid it has to be with the javascript mix I've got between the script brackets I'm afraid

Question 17

@Roman Rdgz: When setting a breakpoint into the done function, is done called? How does data look like? Is the HTTP status 200?

Question 18

I don't know how to set breakpoints when developing javascript. But I did put a console.log() entry at done function, and it is never printed. So it's not working at all

erkan demir 1,4164 gold badges22 silver badges40 bronze badges · Accepted Answer · 2013-06-06 11:20:18Z

1

Did you serialize your object to json format ?

 $.ajax({
 url: //your_url,
 type: "POST",
 success: function (data) {
 // write your parsing code..
 }
 },
 error: function (err) {
 }
 });

exp json from w3schools.com

{
"people": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

parsing exp (in jquery ajax success function ):

$.each(data.people, function (i, person) {
 console.log(person.firstName + " " + person.lastName)
});

Share

Improve this answer

edited Jun 6, 2013 at 15:11

answered Jun 6, 2013 at 11:20

erkan demir's user avatar

erkan demir

1,4164 gold badges22 silver badges40 bronze badges

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

5 Comments

aggsol

aggsol Over a year ago

Please use a comment for questions.

2013年06月06日T11:23:17.07Z+00:00

Roman Rdgz

Roman Rdgz Over a year ago

I don't know if I need to: It is a geoJSON generated with django libraries, I guess it is already serialized, isn't it? Anyway that's not the problem I'm trying to solve now

2013年06月06日T11:27:43.737Z+00:00

erkan demir

erkan demir Over a year ago

First write your request url to browser address bar to see json data. If it is ok you can use jquery ajax function for parsing json data.

2013年06月06日T11:40:49.333Z+00:00

Roman Rdgz

Roman Rdgz Over a year ago

@erkandemir how can I do that?

2013年06月06日T13:43:49.547Z+00:00

Roman Rdgz

Roman Rdgz Over a year ago

@erkandemir Ok I think I understand the problem: this function SENDS a POST request to the server, and IF SUCCEEDS, then does something with the response data. But I already have the first part coverend in a different way. I just need to catch the response. Is there any function that executes whenever a post request is received without having to send anything before?

2013年06月07日T12:25:24.51Z+00:00

CollectivesTM on Stack Overflow

Get JSON response at javascript

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related