jQuery AJAX call returns [object Object]

Question

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

EDIT: It updates a ID/CLASS or input value on the webpage depending on the value returned.

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>

Currently it is returning:

[object Object]

I have 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 can someone tell me what I did wrong.

Thanks in advance!

Can we see the source for your demo.json page? And have you tried console.log(resp);? — Chris Kempen
– Chris Kempen, Commented Oct 25, 2013 at 7:57
It means, that resp.currency[0].amount actually returns an object. Try to figured it out with console.log(resp.currency[0].amount) and check, what data/object returns. — Slevin
– Slevin, Commented Oct 25, 2013 at 7:57
Tried using it in a fiddle, seems to be working fine. Nothing seems to be wrong with your object. — MisterBla
– MisterBla, Commented Oct 25, 2013 at 8:04

palaѕн · Accepted Answer · 2013-10-25 08:03:47Z

22

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]

edited Oct 25, 2013 at 8:03

answered Oct 25, 2013 at 7:58

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vaughan Thomas Over a year ago

Thanks everyone for the comments and help! @palash I have applied this onto my file and I get Uncaught TypeError: Cannot read property 'currency' of undefined on console.log(resp.d.currency[0].amount);

palaѕн Over a year ago

@VaughanThomas Ok that was only for the testing/debugging purpose, you can remove all the console.log codes..

RationalRabbit Over a year ago

stackoverflow.com/questions/22233650/…

Richard Peck · Accepted Answer · 2013-10-25 07:58:17Z

21

[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

answered Oct 25, 2013 at 7:58

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

1 Comment

Yixing Liu Over a year ago

After JSON.stringify(resp), I get an object. What should I do then?

McRui · Accepted Answer · 2013-10-25 08:14:09Z

2

You're calculating 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

answered Oct 25, 2013 at 8:14

McRui

2,0223 gold badges21 silver badges32 bronze badges

Comments

Scary Wombat · Accepted Answer · 2013-10-25 07:58:43Z

1

This code

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

is being evaluated before the success of the ajax call. it needs to be moved into the success block

answered Oct 25, 2013 at 7:58

Scary Wombat

44.9k6 gold badges38 silver badges67 bronze badges

Comments

dagh · Accepted Answer · 2019-10-18 23:37:37Z

use the 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>

Collectives™ on Stack Overflow

jQuery AJAX call returns [object Object]

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related