CODEWITHSUNDEEP
javascriptjqueryajax
Sumanth Jois
Sumanth Jois

Reputation: 3234

Jquery $.ajax with dataType parse error

I have went through the other questions related to my issue but the solutions dint work for me. This is my ajax code:

   $.ajax({
     url:'http://localhost:8080/items?callback=?',
     type:'GET',
     //the name of the callback function
     jsonp: "jsonpcallback",
     dataType:'jsonp',

     success:function(data){
        alert("hello" + data);
         var length = data.length;
         for(var i=0;i<length;i++){
           var object = data[i];
           var item = new Item(object.id,object.name,object.price,object.quantity);
           $("#items-container").append(getItemHtml(item.id));

         }

     },
     error:function(xhr,status,error){
        alert(status);
     }
 });

This is my callback function:

function jsonpcallback(data){
 console.log(data);
}

I am getting a error called parse error. can somebody please tell me where I am going wrong??? Response coming from the server doesn't have any errors.

Edit: Added server response:

 [
  {
    "id": 1,
    "name": "Snickers",
    "price": 1.5,
    "quantity": 7
  },
  {
    "id": 2,
    "name": "M&M's",
    "price": 1.25,
    "quantity": 8
  },
  {
    "id": 3,
    "name": "Almond Joy",
    "price": 1.25,
    "quantity": 11
  },
  {
    "id": 4,
    "name": "Milky Way",
    "price": 1.65,
    "quantity": 3
  },
  {
    "id": 5,
    "name": "Payday",
    "price": 1.75,
    "quantity": 2
  },
  {
    "id": 6,
    "name": "Reese's",
    "price": 1.5,
    "quantity": 5
  },
  {
    "id": 7,
    "name": "Pringles",
    "price": 2.35,
    "quantity": 4
  },
  {
    "id": 8,
    "name": "Cheezits",
    "price": 2,
    "quantity": 6
  },
  {
    "id": 9,
    "name": "Doritos",
    "price": 1.95,
    "quantity": 7
  }
]

Upvotes: 1

Views: 600

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337590

The response of your call is JSON, not JSONP. They are not interchangeable. To fix this set dataType to 'json' and remove references to JSONP callbacks. Try this:

$.ajax({
  url: 'http://localhost:8080/items',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data); // only for testing

    var length = data.length;
    for (var i = 0; i < length; i++) {
      var object = data[i];
      var item = new Item(object.id, object.name, object.price, object.quantity);
      $("#items-container").append(getItemHtml(item.id));
    }
  },
  error:function(xhr, status, error) {
    alert(status);
  }
});

Upvotes: 1

Related Questions