CODEWITHSUNDEEP
javascriptjqueryajax
henrywright
henrywright

Reputation: 10240

How to read AJAX response variable?

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?

Upvotes: 1

Views: 4117

Answers (4)

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 0

wjohnsto
wjohnsto

Reputation: 4463

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);
});

Upvotes: 2

kaxi1993
kaxi1993

Reputation: 4700

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

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

Upvotes: 1

Ernesto
Ernesto

Reputation: 301

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);
}

Upvotes: 1

Related Questions