Geek Answers Handbook

JQuery AJAX call returns [Object]

I am working on a jQuery fix for Exchange on a website.

EDIT: it updates the ID / CLASS or input value on the web page depending on the return value.

index.php:

<!doctype html> 

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <meta charset="utf-8"> <title>load demo</title> <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: '/datacall/demo.json', dataType: 'json', success: function( resp ) { $( '#div' ).val( resp.currency[0].amount ); }, error: function( req, status, err ) { console.log( 'Something went wrong', status, err ); } }); var end = parseInt($('#value').val()); var newend = parseInt($('#div').val()); var result = $( end * newend ); $('#clickme').click(function() { $('#new').val( result ); }); }); </script> 

 <div> <input type="hidden" value="2500" id="value" /> <input type="hidden" value="" id="div"> <input type="text" id="new" value="" readonly/> <input type="button" value="Change" id="clickme" /> </div>

He is currently returning:

 [object Object]

I also tried returning it to a div with .text ()

demo.json:

  { "currency" : [ { "name" : "South Africa", "code" : "ZAR", "amount" : 0.14 }, { "name" : "America", "code" : "USD", "amount" : 0.64 }, { "name" : "Europe", "code" : "GBP", "amount" : 1.29 } ] }

Please someone tell me what I did wrong.

Thanks in advance!

+10
javascript jquery html ajax
source share
5 answers

You can do it:

 // 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 problems are here: -

  • You need to do all the result logic in the ajax callback, since ajax is asynchronous , and you always get empty values ​​for the end and newend .
  • No need to do this result = $( end * newend ); since it creates a new instance of the jQuery object and therefore you get [object Object]
+20
source share

[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 an array that will give you the opportunity to better select the elements to output.

+15
source share

You calculate the product inside $()

 var end = parseInt($('#value').val()); var newend = parseInt($('#div').val()); var result = end * newend; // this $(end * newend) is probably what was wrong
+2
source share

This code

 var end = parseInt($('#value').val()); var newend = parseInt($('#div').val()); var result = $( end * newend );

evaluated before the success of the ajax call. it must be transferred to the success block

+1
source share

use a for loop like this code:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $( "select[name='continue[matiere]']" ).change(function () { var matiereID = $(this).val(); if(matiereID) { $.ajax({ url: "{{ path('ajaxform') }}", dataType: 'Json', data: {'id':matiereID}, type:'POST', success: function(data) { $('select[name="continue[chapitre]"]').empty(); for(i = 0; i < data.length; i++) { student = data[i]; $('select[name="continue[chapitre]"]').append('<option value="'+ student['id'] +'">'+ student['nom'] +'</option>'); }; } }); }else{ $('select[name="continue[chapitre]"]').empty(); } }); </script>
0
source share

More articles:


All Articles