How to read AJAX response variable?

Question

The following is the response I'm receiving in my AJAX success function:

"{"success":true,"data":{"id":1841,"title":"atitle","filename":"filename.jpg","url":"http:\/\/example.com\/wp-content\/uploads\/2014\/11\/filename.jpg","link":"http:\/\/example.com\/?attachment_id=1841","alt":"","author":"21","description":"","caption":"","name":"filename-39","status":"inherit","uploadedTo":0,"date":1415555051000,"modified":1415555051000,"menuOrder":0,"mime":"image\/jpeg","type":"image","subtype":"jpeg","icon":"http:\/\/example.com\/wp-includes\/images\/media\/file.png","dateFormatted":"November 9, 2014","nonces":{"update":"b832c2939d5","delete":"83dda46357e","edit":"51ac41b11c6"},"editLink":"http:\/\/example.com\/wp-admin\/post.php?post=1841&action=edit","meta":false,"authorName":"Some One","filesizeInBytes":10755,"filesizeHumanReadable":"11 kB","sizes":{"thumbnail":{"height":90,"width":90,"url":"http:\/\/example.com\/wp-content\/uploads\/2014\/11\/filename-90x90.jpg","orientation":"landscape"},"full":{"url":"http:\/\/example.com\/wp-content\/uploads\/2014\/11\/filename.jpg","height":260,"width":236,"orientation":"portrait"}},"height":260,"width":236,"orientation":"portrait","compat":{"item":"","meta":""}}}"

I'm trying to update the src attribute of a particular image on my page using the data that is returned in this response. For example:

$( '#myimage' ).attr( 'src', response.data.url );

The problem is, I get the error Uncaught TypeError: Cannot read property 'url' of undefined

I'm sure response.data.url is wrong. How can I get the URL from the response so that I can update the image's src attribute?

Answer 1

You might be able to take advantage of jQuery's getJSON method. When you're using ajax, you are only receiving a string response, so you would first have to parse it as json using parseJSON . However, getJSON will do parseJSON for you.

$.getJSON('my/service', function(data) {
    $('#myimage').attr('src', data.url);
});

Answer 2

use JSON.parse to parse as an object, your returned data is string:

response=JSON.parse(response);
$( '#myimage' ).attr( 'src', response.data.url );

Answer 3

yo could use

x=$.parseJSON(response)

and this will convert the json string to a valid json objet, if there is an error will throw an exception you can use try{}catch(e){} to fix it

try{
var x=$.parseJSON(response);
}catch(e){
console.log(e);
}

Answer 4

The simple way is to use an AJAX request like this:

$.post('remote_url', {key:value}, function(response){
    if(response.success) {
        $('#myimage').attr('src', response.data.url);
    }
}, 'json');

In this example, I've used $.post and you didn't provide enough information about the request type so it could be a $.getJSON request as well. Also, {key:value} is an object which will be passed to the server if required. So, use it if you pass any data to server, otherwise remove it.

In this example, 'json' is being used as data type so the response will be parsed by jQuery also if you use $.getJSON then the response will be parsed but in this case, you don't need to use 'json' as the last parameter. For example:

$.getJSON('remote_url', function(response) {
    if(response.success) {
        $('#myimage').attr('src', response.data.url);
    }
});

Note: getJSON loads JSON-encoded data from the server using a GET HTTP request. So, for a POST request use $.post instead.