CODEWITHSUNDEEP
phpjqueryajaxjson
Maxx
Maxx

Reputation: 602

jquery ajax not parsing json data from php

I'm facing a strange problem for the last 10 hours and its really very annoying. The problem is with jquery printing json data from php. The php script is running fine, but when the ajax call returns in complete: event i'm not getting any valid otput.

here is the jquery code::

list_choice = "A";
content_choice = "Artists";             //globals to store default value

$(document).ready(function() {
$('.list-nav > a').click(function() {
    var ltext = $(this).text();
    list_choice = ltext;
    console.log(ltext+" <------>    ");        
    $.ajax({            
        url: 'retrieveFileFront.php',
        data: {type: content_choice, navtext: list_choice},
        type: 'POST',
        dataType: 'json',            
        complete: function(data) {                
            console.log(data['message']['Album_Name']);          
        }
    });
    return false;
});

});

i had to use complete: event as success: didn't worked at all. Atleast i'm getting some sort of output from the complete: event, although its giving undefined or [object][Object] which is totally ridiculous.

here is the retrieveFileFront.php:

<?php

require './retrieveFiles.php';

$type = $_POST['type'];
$nav_text = $_POST['navtext'];

$ret_files = new retrieveFiles($type, $nav_text);
$data = $ret_files->retFiles();
if ($data['success'] == FALSE) {
    $data = array('success' => FALSE, 'message' => 'Sorry an Error has occured');
    echo json_encode($data);

} else {
    echo json_encode($data);
}

?>

and here is the /retrieveFiles.php

<?php

class retrieveFiles {        
    public $content_type;
    public $list_nav;
    public $connection;
    public $result;
    public $result_obj;
    public $tags_array;
    public $query;
    public $row;

    public function __construct($type, $nav_text) {            
        $this->content_type = $type;
        $this->list_nav = $nav_text;     
    }

    public function retFiles() {

        @$this->connection = new mysqli('localhost', 'usr', 'pass', 'data');
        if(!$this->connection) {
            die("Sorry Database connection could not be made please try again later. Sorry for the inconvenience..");
        }

        if ($this->content_type == "Artists") {                

            $this->query = "SELECT album_name, album_art FROM album_dummy NATURAL JOIN album_images_dummy WHERE artist_name LIKE '$this->list_nav%'";               

            try {
                $this->result = $this->connection->query($this->query);
                $this->row = $this->result->fetch_row();

                if (isset($this->row[0]) && isset($this->row[1])) {
                    $this->tags_array = array("success" => true, "message" => array("Album_Name" => $this->row[0], "Album_Art" => $this->row[1]));

                    return $this->tags_array;
                }

        }   catch (Exception $e) {                
                echo 'Sorry an Error has occurred'.$e;
                return false;
            }
        }
   }

}

?>

I'm getting a 200 response in console in firebug, which indicates that its running okay.

<!DOCTYPE HTML>

{"success":true,"message":{"Album_Name":"Streetcleaner","Album_Art":"\/var\/www\/html\/MusicLibrary\/Musics\/1989 - Streetcleaner\/folder.jpg"}}

Now this is making me even more confused as i can see that the json is formatted properly. Please provide any sort of suggestion on how to solve this problem.

Thanks in advance..

Upvotes: 0

Views: 5324

Answers (4)

Rajendra Khabiya
Rajendra Khabiya

Reputation: 2030

Use success event instead of complete in ajax and we can able to parse JSON encoded data in javascript/jQuery by using JSON.parse

Upvotes: 1

Maxx
Maxx

Reputation: 602

well after a long period of trauma, i finally found a solution, turns out that i needed to parse the response text and then access the objects, individually. Here is the working code

list_choice = "A";
content_choice = "Artists";             //globals to store default value

$(document).ready(function() {
$('.list-nav > a').click(function() {
    var ltext = $(this).text();
    list_choice = ltext;
    console.log(ltext+" <------>    ");

    $('#loading').css('visibility', 'visible');

    $.ajax({
        url: 'retrieveFileFront.php',
        data: {type: content_choice, navtext: list_choice},
        type: 'POST'
        dataType: 'json',
        complete: function(data) {

            var res = data.responseText;
            res = res.replace(/<!DOCTYPE HTML>/g, "");
            res = res.trim();

            console.log(res);
            var arr = JSON.parse("[" + res +"]");    //needed to parse JSON object into arrays
            console.log(arr[0].message.Album_Name);
            console.log(arr[0].message.Album_Art);               

            $('#loading').css('visibility','hidden');
        }
    });
    return false;

});

This works fine and gives the desired response. Anyways thanks for the help, guys.

Upvotes: 0

Bjorn &#39;Bjeaurn&#39; S
Bjorn &#39;Bjeaurn&#39; S

Reputation: 3891

JSON encoded data is usually not sent like

data['message']['Album_Name']);

But rather like:

data.message.Album_Name;

You're calling your results the wrong way. These are not associative arrays anymore but are now objects, as the name JSON (JavaScript Object Notation) suggests.

Upvotes: 1

Michael Wheeler
Michael Wheeler

Reputation: 660

You need to parse the json response using

data = $.parseJSON(data)

Upvotes: 1

Related Questions