jQuery AJAX call returns [object Object]

You can do this:

// Create some global variables
var end = parseInt($('#value').val(), 10);
var newend = 0;
var result = 0;

$.ajax({
    url: '/datacall/demo.json',
    dataType: 'json',
    success: function (resp) {

        // Check the values in console
        console.log(resp.currency[0].amount);
        console.log(resp.d.currency[0].amount);

        $('#div').val(resp.currency[0].amount);
        newend = parseInt(resp.currency[0].amount, 10);
        result = end * newend;

        // No need to create a new jQuery object using $()
        // result = $( end * newend );
    },
    error: function (req, status, err) {
        console.log('Something went wrong', status, err);
    }
});

$('#clickme').click(function () {
    $('#new').val(result);
});

So the main issues here is:-

  • You need to do all the result logic in the ajax success callback, as ajax is asynchronous and you always get the empty values for the end & newend variables.
  • No need to do this result = $( end * newend ); as it creates a new jQuery object instance and hence you are getting [object Object]

[object Object] is basically an array

Try this code:

   success: function( resp ) {
       //$( '#div' ).val( resp.currency[0].amount );
       alert(JSON.stringify(resp));
    },

This should show you the array, which will give you the ability to better select the elements to output