CODEWITHSUNDEEP
phpjqueryajaxjson
Quhalix89
Quhalix89

Reputation: 129

jQuery AJAX can't work with JSON response

I have a JSON response from my php file like:

[
  {"id":"1"},
  {"archiveitem":"<small>26.06.2015 12:25<\/small><br \/><span class=\"label label-default\">Bug<\/span> has been submitted by Admin"}
]

And try to fetch this response into a div after button was clicked, however firebug is telling me the message from the error-handler. I can't figure out the problem? 

$('#loadarchive').click(function(){
    $.ajax({
        type: 'post',
        url: '/src/php/LoadAdminDashboardArchive.php',
        dataType: 'json',
        data: {
            action : 'getArchive'
        },
        success: function(results) {
            var archiveelements = JSON.parse(results);
            console.log(results);
            $.each(archiveelements, function(){
                $('#archivecontent').html('<div class="mark-read-container"><span class="btn-mark-unread" id="' + this.id + '">Unarchive</span></div><div class="bs-callout bs-callout-default">' + this.archiveitem + '</div>');
            });
        },
        error: function(){
            console.log('Cannot retrieve data.');
        }
    });
});

Upvotes: 4

Views: 329

Answers (5)

Umair Ayub
Umair Ayub

Reputation: 21351

As you are saying message from error-handler is showing.

That means AJAX is never sent to server because of incorrect URL or any other reason.

Use Firebug in Firefox and see the error in console tab.

Also I see your code

dataType: 'json',
data: { action : 'getArchive' },
success: function(results) {
    var archiveelements = JSON.parse(results);
}

Do not use JSON.parse(results) because you have already written dataType: 'json', and any type of response is parsed automatically.

Upvotes: 1

Quhalix89
Quhalix89

Reputation: 129

I was able to get it working and the problem was quite simple...

I forgot to paste the "button" - source code that initiated the ajax request. It was an Input of type "submit" and therefore the page reloaded by default after the response was retrieved successfully... so e.preventDefault(); was the way to go.

Thanks to all of you.

Upvotes: 0

Sumeet
Sumeet

Reputation: 1799

First your response is not correct,Correct response should look like this

[{
  "id":"1",
  "archiveitem":"<small>26.06.2015 12:25<\/small>
<br \/><span class=\"labellabel-default\">Bug<\/span> has been submitted by Admin"
},
{
  ...
}]

Second You dont have to parse result ie.JSON.parse is not required since dataType:'json' will probably take care of json.

Finally your success method should look like this:

 success: function(results) {
            $.each(results, function(ind,el){
                $('#archivecontent').html('<div class="mark-read-container"><span class="btn-mark-unread" id="' + el.id + '">Unarchive</span></div><div class="bs-callout bs-callout-default">' + el.archiveitem + '</div>');
            });
        },

Upvotes: 1

Sergej
Sergej

Reputation: 1092

I tried to run your Code and I get

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

By defining dataType: 'json' your result is parsed already as an Array. So you can do something like:

success: function (results) {
    if (results["head"]["foo"] != 0) {
        // do something
    } else if (results["head"]["bar"] == 1) {
        // do something
    }
}

this works on my computer:

$.ajax({
    type: 'post',
    url: '/src/php/LoadAdminDashboardArchive.php',
    dataType: 'json',
    data: { action : 'getArchive' },
    success: function(results) {
        console.log(results);
        $.each(results, function(){
            $('#archivecontent').html('<div class="mark-read-container"><span class="btn-mark-unread" id="' + this.id + '">Unarchive</span></div><div class="bs-callout bs-callout-default">' + this.archiveitem + '</div>');
        });
    },
    error: function(){
        console.log('Cannot retrieve data.');
    }
});

Upvotes: 2

jazZRo
jazZRo

Reputation: 1608

You can get more information from the console if you dive into it a bit more. Or by logging these two parameters:

error: function(xhr, mssg) {
    console.log(xhr, mssg);
}

Upvotes: 1

Related Questions