Fill a HTML select element with php, json and MySQL - php

Question

With below function I get data from the database:
public function cargarPaises(){
$modelo = new Conexion();
$conexion = $modelo->get_conexion();
$sql = "select idPais, nombre from paises";
$statement = $conexion->prepare($sql);
$statement->execute();
return $statement;
}
Then in this other file I call the function "cargarPaises":
<?php
require_once('../Modelo/class.conexion.php');
require_once('../Modelo/class.consultas.php');
$consultas = new Consultas();
$datos = $consultas->cargarPaises();
if (count($datos) > 0) {
while ($result = $datos->fetch(PDO::FETCH_ASSOC)) {
//printf ("%s (%s)\n", $result["idPais"], $result["nombre"]);echo"<br>";
//return $result;
//$nombre=$result['nombre'];
//$idPais=$result['idPais'];
//echo "<option value=".$idPais.">".$nombre."</option>\n";
//echo json_encode($result,JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS);
echo json_encode($result);
}
}else{
return "No hay opciones en la BD";
}
?>
Now when I try to use the code in a jquery file:
$('#email').click(function(event) {
$.get('Controlador/cargarPaises.php', function(data) {
console.log(data);
});
});
I got the below in console (google chrome), All 427 records from my database (I am showing only 10):
echo json_encode($result); i got in console
{"idPais":"1","nombre":"Mexico"}
{"idPais":"3","nombre":"Albania"}
{"idPais":"4","nombre":"Alemania"}
{"idPais":"5","nombre":"Andorra"}
{"idPais":"6","nombre":"Angola"}
{"idPais":"7","nombre":"Antigua y barbuda"}
{"idPais":"8","nombre":"Antillas holandesas"}
{"idPais":"10","nombre":"Argelia"}
Now the question is how can I "play" with the variable "data" to fill a select HTML element.

Answer 1

First of all, you have a bug in your cargarPaises file. You're echoing a json encoding of the object for each row - you probably actually want to return an array of objects as a single json result. You're also returning a string for an error rather than an object that would let you know that. And finally, you're getting the count of a PDO statement, rather than the rowCount. Something like this would be better:
if ($datos->rowCount() > 0) {
echo json_encode($datos->fetchAll(PDO::FETCH_ASSOC));
} else {
echo json_encode(array());
}
I'd probably also modify your .get call for a start to explicitly state you're fetching json, and then add something like the following to build up the options:
$.get('Controlador/cargarPaises.php', function(data) {
$.each(data, function(idx, opt) {
$('#myselect').append('<option value="' + opt.idPais + '">' + opt.nombre + '</option>');
});
}, 'json');

Answer 2

public function cargarPaises(){
$modelo = new Conexion();
$conexion = $modelo->get_conexion();
$sql = "select idPais, nombre from paises where 1"; //changed
$statement = $conexion->prepare($sql);
return $statement->fetchAll(PDO::FETCH_ASSOC); //changed
}
And the second file
require_once('../Modelo/class.conexion.php');
require_once('../Modelo/class.consultas.php');
$consultas = new Consultas();
$datos = $consultas->cargarPaises();
$results = (count($datos) > 0) ? $datos : array("error"=>"No hay opciones en la BD");
echo json_encode($results);