php array from mySql wont display in DOM as json object

Question

php array from mySql wont display in DOM as json object

I dont know what to call this problem . I have a jquery ajax get statement:

function fill_contact(evt) /** display click event **/
    {
        var country_id = evt.target.id
        document.getElementById('country_name').firstChild.data = country_id

            /** Perform an asynchronous HTTP (Ajax) request. **/        
          $.ajax({ 
                    url:'../core/database/mapString.php',   /** the script to call to get data  **/             
                data:{ "country_name": country_id },  /** pass the country name as a name/value pair.  **/
                type:'GET',                     
                dataType: 'json',                /** data format **/                            
                success: function(json_data){   /**Function for showing data. **/
                /** Update html content **/
                console.log(json_data);                 

                /**Set output element html **/          
                $('#firstname').html(json_data.firstname); 
                $('#lastname').html(json_data.lastname);
                $('#email').html(json_data.email); 
                $('#photo').html(json_data.photo);
                },
                    /**error handling. **/  
                    error: function(xhr, status, error) {
                    //var err = eval("(" + xhr.responseText + ")");
                    $('<div id="fb-root" />').html(xhr.responseText).prependTo('body');
                },  
          }); 
    }

This works and sends the country_name to the server and the sql gets it and processes it. When I echo the result, it shows the correct result. If the country clicked has no information ie. if empty, then the array posts the correct default values (json object) and they appear in the correct places in the DOM. If however the country has information: then it doesn't display in the DOM. ??? only displays in the echo. So the data is there.

 if (isset($_GET["country_name"])) { 
    $country_name = $_GET["country_name"];

    /** run prepare to select records **/   
    $stmt = $dbh->prepare("SELECT firstname, lastname, email, photo FROM reps WHERE country = :country_name");
    $stmt->bindParam(':country_name', $country_name, PDO::PARAM_STR);
    $stmt->execute();

    /** Values to fill up the form **/      
    $result = $stmt->fetch();   
    }
    /** create the array **/
    $json_data=array();

    /** Check if there is data, if not give default data **/        
    if(empty($result)) {
    $json_data  = array( 'firstname' => 'www.aeea.org',
                         'lastname' => '',
                         'email' => '[email protected]',
                         'photo' => '../images/Afrizone.png');
    } 
    else {      //******* How do I build this array from database results? *******//
    $json_data  = array( 'firstname' => $result['firstname'],
                         'lastname' => $result['lastname'],
                         'email' => $result['email'],
                         'photo' => $result['photo']);

        /** Test if the info is there - it is **/
        echo $json_data['firstname'] . " " . $json_data['lastname'] . '<br />';
        echo $json_data['email'] . '<br />';        
    }

    /** built in PHP function to encode the data in to JSON format  **/ 
    header('Content-Type: application/json');    
     echo json_encode($json_data);
     return $json_data; 

    /*** close the database connection ***/
    $dbh = null;    

Could you help me with where I am missing it?

Thanks in advance for your valuable time.

Spinnoff From: displaying data from sql from clicking on svg map and https://stackoverflow.com/questions/30383629/using-a-svg-image-click-event-to-get-data-from-sql-using-ajax-and-json

Answer 1

The problem was in the else statement. It did not work with it in, so I removed it. Changed the code to this:

if(empty($result)) {
$json_data  = array( 'firstname' => 'www.aeea.org',
                     'lastname' => '',
                     'email' => '[email protected]',
                     'photo' => '<img src="../images/profile/person.jpg" />');

            echo json_encode($json_data);
            return $json_data;  
          } 

$json_data  = array( 'firstname' => $result['firstname'],
                     'lastname' => $result['lastname'],
                     'email' => $result['email'],                       
                     'photo' => base64_encode($result['photo'] ));      

 header('Content-Type: image/json');    
 echo json_encode($json_data);
 return $json_data; 

Now I just need some advice on getting the image to show properly.