Ajax returns [object Object] output

Question

I have a cartItem variable which includes title, price etc. I make an AJAX request when I click the 'add to cart' button but it returns [object Object] output instead of its title and price.

let cartTitle = $('.card-title', addCartItem);
let cartDescription = $('.card-description', addCartItem);
let cartPrice = $('.price', addCartItem);

var id = this.dataset.productId

$.ajax({
  type: 'GET',
  url: ('/getData'),
  data: {
    id: id
  },
  success: function(data) {
    cartTitle.text(data.title)
    cartPrice.text(data.price)
    cartDescription.text(data.description)
    $('tbody').prepend(cartItem)
  }
})

Rory McCrossan · Accepted Answer · 2021-03-12 11:14:50Z

1

cartItem is an object. You need to create a string from it's properties to prepend() to the tbody.

In addition you need to append <tr> elements to the tbody, so the title and price values will need to be wrapped within that to ensure the HTML you create is valid. Try this:

success: function(data) {
  cartTitle.text(data.title)
  cartPrice.text(data.price)
  cartDescription.text(data.description)

  $('tbody').prepend(`<tr><td>${cartItem.title}</td><td>${cartItem.price}</td></tr>`);
}

answered Mar 12, 2021 at 11:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

Ajax returns [object Object] output

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related