Trying to receive json from php with ajax and print results in HTML

Question

I'm trying to make a application using phonegap. I am trying to make a select using php return the result to ajax function and print the result...but I don't know if I am doing right and what I need to put in my html code to show the result.

AJAX CODE:

$(document).ready(function() {

$.ajax({

    url : 'http://ip/again/www/index.php',

    dataType : "json",

    success : function(data){

        var html = "";


        for($i=0; $i < data.length; $i++){

            html += "<strong>Nome:</strong> "+data[$i].nome +" "+   
            data[$i].sobreNome;

            html += " <strong>Cidade:</strong> "+data[$i].cidade;

            html += "<br />";
        }


        $('body').html(html);
        }
    });
   });
</script>

PHP CODE:

<?php
$hostname = 'localhost';
$username = 'root';
$password = 'pass';
$database = 'mydb';

try {
$pdo = new PDO("mysql:host=$hostname;dbname=$database", $username,   
$password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
    //echo 'Conexao efetuada com sucesso!';
}
catch(PDOException $e)
{
    echo $e->getMessage();
}

 $sql = 'SELECT * FROM incidente ORDER BY codigo' ;


try {

$recebeConexao = $pdo->prepare($sql);

$recebeConexao->execute();

$result = $recebeConexao->fetchAll();


if ( count($result) ) {
foreach($result as $row) {
    $incid=$row;
      echo (json_encode($incid));

}
} else {
$incid=0;
}


} catch (PDOException $ex) {
echo "Erro no Banco";
}

?>

Answer 1

You're writing the for loop incorrectly. You must declare your variable with the var keyword like so:

for(var $i = 0; $i < data.length; $i++) {
    // ...
}

Since your script does not return an array, the length property will not be available.

When you're dealing with an object in Javascript, you will want to use the for...in syntax (making sure to validate that the property belongs to the object you're iterating over).

However, the code you provided will not return an object or an array, because the JSON is malformed.

The correct way for an API to return multiple, unordered Javascript objects would be to wrap them in an array, like so:

if(count($result)) {
    $list = array();

    foreach($result as $row) {
        $list[] = $row;
    }

    echo json_encode($list);
}

$.ajax({
    // ...
    success: function (data) {
        // Loop over each object, since your script should ideally return an array
        for (var $i = 0; $i < data.length; $i++) {
            var object = data[$i];

            html += '<strong>Nome:</strong> ' + object.nome + ' ' + object.sobreNome;

            // etc...
        }
    }
});