I can't output json from ajax call

Question

I'm working on a price calculator, in Joomla, and i created a plugin to use for my ajax function.

It seems it works fine, but when i get the data, i can't output it.

Here is my jquery code fro the ajax request:

jQuery(document).ready(function(){
    jQuery("#postcode-search").keyup(function(){
        jQuery('#priceList ul').html('');
        jQuery('#priceList').hide();
        jQuery.ajax({
        type: "POST",
        url: "index.php?option=com_ajax&plugin=PriceCalculator&format=json",
        dataType: "json", 
        data:'keyword='+jQuery(this).val(),
        beforeSend: function(){
            jQuery("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
console.log(data);

            jQuery("#suggesstion-box").show();
            jQuery("#suggesstion-box").html(data.Postcode);
            jQuery("#search-box").css("background","#FFF");

        }
        });
    });
});

I get this array through the console log:

"[{"id":"1110","Postcode":"W11 1AA","Heathrow":"43","Luton":"58","Stansted":"58","Gatwick":"53","pcat":"W11"},{"id":"1111","Postcode":"W11 1AB","Heathrow":"43","Luton":"58","Stansted":"58","Gatwick":"53","pcat":"W11"},{"id":"1112","Postcode":"W11 1AD","Heathrow":"43","Luton":"58","Stansted":"58","Gatwick":"53","pcat":"W11"},{"id":"1113","Postcode":"W11 1AE","Heathrow":"43","Luton":"58","Stansted":"58","Gatwick":"53","pcat":"W11"},{"id":"1114","Postcode":"W11 1AF","Heathrow":"43","Luton":"58","Stansted":"58","Gatwick":"53","pcat":"W11"}]"

enter image description here

What am i doing wrong please?

Answer 1

Verify that your api returns valid json, and make sure 'Content-Type: application/json' is set in the response header.

https://www.getpostman.com/ is a valuable tool when developing RestAPI:s it might help you debug your problem.