JSON analysis from jQuery.ajax success data

Question

I'm having trouble getting the contents of a JSON object from a JQery.ajax call. My challenge:

$('#Search').click(function () { var query = $('#query').valueOf(); $.ajax({ url: '/Products/Search', type: "POST", data: query, dataType: 'application/json; charset=utf-8', success: function (data) { alert(data); for (var x = 0; x < data.length; x++) { content = data[x].Id; content += "<br>"; content += data[x].Name; content += "<br>"; $(content).appendTo("#ProductList"); // updateListing(data[x]); } } }); }); 

It seems that the JSON object is returning correctly because "alert (data)" displays the following

 [{"Id": "1", "Name": "Shirt"}, {"Id": "2", "Name":"Pants"}] 

but when I try to display Id or Name on the page using:

 content = data[x].Id; content += "<br>"; content += data[x].Name; content += "<br>"; 

it returns "undefined" to the page. What am I doing wrong?

Thanks for the help.

Answer 1

The data is returned as a JSON string representation, and you do not convert it back to a JavaScript object. Set dataType only 'json' so that it is automatically converted.

Answer 2

I recommend you use:

 var returnedData = JSON.parse(response); 

to convert a JSON string (if it's just text) for a JavaScript object.

Answer 3

One way to ensure that this type of error (using a string instead of json) does not happen is to see what is printed in alert . When you do

 alert(data) 

if the data is a string, it will print everything that is contained. However, if you are printing a json object. you will receive the following response in warning

 [object Object] 

If this is the answer, you can be sure that you can use it as an object (in this case json).

Thus, you first need to convert the string to json before using it by following these steps:

 JSON.parse(data) 

Answer 4

Well ... you're about 3/4 of the way ... you already have JSON as text.

The problem is that you seem to process this string as if it were already a JavaScript object with properties associated with the passed fields.

This is not ... its just a string.

Queries like "content = data [x] .Id;" required to crash because JavaScript does not find these properties attached to the line it is looking at ... again, its just a line.

You should simply parse the data as JSON via ... yup ... the parse method of the JSON object.

 myResult = JSON.parse(request.responseText); 

Now myResult is a javascript object containing the properties that were passed through AJAX.

This should allow you to handle it the way you are trying to do.

It seems like JSON.parse was added when ECMA5 was added, so something pretty modern should be able to handle this initially ... if you need to handle fossils, you can also try using external libraries like jQuery or JSON2 .

For the record, Andy E has already answered for someone else HERE .

edit - I saw a request for "official or reliable sources", and probably one of the encoders that I think is most likely would be John Resig ~ ECMA5 JSON ~ I would contact the actual ECMA5 specification regarding native JSON support, but I would rather handed someone to a captain like Resig, not a dry specification.

Answer 5

It works fine, for example:

 .ajax({ url: "http://localhost:11141/Search/BasicSearchContent?ContentTitle=" + "تهران", type: 'GET', cache: false, success: function (result) { // alert(jQuery.dataType); if (result) { // var dd = JSON.parse(result); alert(result[0].Id) } }, error: function () { alert("No"); } }); 

Finally, you need to use this statement ...

 result[0].Whatever 

Answer 6

you can use the parseJSON jQuery method:

 var Data = $.parseJSON(response); 

Answer 7

Try the jquery each function to go through your json object:

 $.each(data,function(i,j){ content ='<span>'+j[i].Id+'<br />'+j[i].Name+'<br /></span>'; $('#ProductList').append(content); }); 

Answer 8

From jQuery API: with dataType setting. If none is specified, jQuery will try to output it using $.parseJSON() based on the MIME type (the MIME type for the JSON text is "application / json") of the response (a JavaScript object will be created in 1.4 JSON).

Or you can set dataType to json to automatically convert it.

Answer 9

I'm not sure what is going on with your setup. The server may have configured the headers incorrectly. Not sure. As a long shot, you can try this.

 $.ajax({ url : url, dataType : 'json' }) .done(function(data, statusText, resObject) { var jsonData = resObject.responseJSON }) 

Answer 10

Input Type Button

  <input type="button" Id="update" value="Update"> 

I have successfully posted a form with AJAX in Perl. After the form is published, the controller returns a JSON response, as shown below

 $(function(){ $('#Search').click(function() { var query = $('#query').val(); var update = $('#update').val(); $.ajax({ type: 'POST', url:'/Products/Search/', data:{ 'insert' :update, 'query' :address, }, success: function(res){ $('#ProductList').empty(''); console.log(res); json=JSON.parse(res); for(var i in json){ var row=$('<tr>'); row.append($('<td id='+json[i].Id+'>').html(json[i].Id)); row.append($('<td id='+json[i].Name+'>').html(json[i].Name)); $('</tr>'); $('#ProductList').append(row); } }, error: function() { alert("did not work"); location.reload(true); } }); }); }); 

Answer 11

parse and convert it to a js object what it is.

 success:function(response){ var content=""; var jsondata= JSON.parse(response); for(var x=0;x<jsonData.length;x++){ content += jsondata[x].Id; content += "<br>"; content += jsondata[x].Name; content += "<br>"; } $("#ProductList").append(content); }