1

Estoy intentando recoger un bucle de PHP en una función XMLHttpRequest para mostrar un listado en un HTML.

$resulTiposTienda = ClaseTiposTienda::obtenerBucleTiposTienda();
$bucle_TiposTienda = $resulTiposTienda[0];
$contadorTiposTienda = count($bucle_TiposTienda);
foreach($bucle_TiposTienda as $itemTiposTienda):
  $myArr = array($itemTiposTienda['id_tipotienda'], $itemTiposTienda['nombre_tipotienda']);     
  $myJSON = json_encode($myArr);
  echo $myJSON;
endforeach;

El resultado que obtengo es el siguiente:

["38501","Cosm\u00e9tica"]["38502","Calzado"]["38503","Textil"]["38504","Inform\u00e1tica"]["38505","Servicios"]["38506","Alimentaci\u00f3n"]["38507","Er\u00f3tica"]["38508","Artesan\u00eda"]["38509","Deporte"]["38510","Papeler\u00eda"]["38511","Arte"]["38512","Electrodom\u00e9sticos"]["38513","General"]["38514","M\u00fasica"]["38515","Herbolario"]["38516","Segunda mano"]["38517","Art\u00edculos Mascotas"]["38518","Mobiliario"]["38519","Automoci\u00f3n"]["38520","Regalos"]

Intento recoger ese resultado para mostrarlo en el div id

<div id="id_tipotienda"></div>

usando XMLHttpRequest y no me devuelve nada en la página.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("id_tipotienda").innerHTML = myObj;
  }
};
xmlhttp.open("GET", "obtenerdatos.php", true);

Uso el document ready, la libreria jquery correctamente, etc... alguien sabría encontrar el/los fallos?

2 respuestas 2

1

El resultado JSON no está bien formateado, te debería quedar algo así:

[  
   {  
      "id_tipotienda": "38501",
      "nombre_tipotienda": "Cosm\u00e9tica"
   },
   {  
      "id_tipotienda": "38502",
      "nombre_tipotienda": "Calzado"
   },
   {  
     "id_tipotienda": "38503",
     "nombre_tipotienda": "Textil"
   },

   ...

   {  
      "id_tipotienda": "38520",
      "nombre_tipotienda": "Regalos"
   }
]

Cambia esta línea de tu archivo PHP y agrégale una clave:

$myArr = array($itemTiposTienda['id_tipotienda'], $itemTiposTienda['nombre_tipotienda']);

$myArr = array("id_tipotienda" => $itemTiposTienda['id_tipotienda'], "nombre_tipotienda" => $itemTiposTienda['nombre_tipotienda']);

Teniendo eso, el código javascript que pones le faltaría sólo esta línea:

// Despues de esta
xmlhttp.open("GET", "obtenerdatos.php", true);    
xmlhttp.send(); //<-

Sin embargo esto te devolvería un resultado similiar a este:

[object Object],[object Object],[object Object] ...

En este caso te sugiero unos cambio para que puedas visualizar la información de manera correcta así:

$(document).ready(function (){

    var xmlhttp = new XMLHttpRequest();
    var url = "obtenerdatos.php";

    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myArr = JSON.parse(this.responseText);
            visualizaArray(myArr);
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    function visualizaArray(arr) {
        var out = "";
        var i;
        for(i = 0; i < arr.length; i++) {
            out += '<p><b>id tipo Tienda: </b>' + arr[i].id_tipotienda + '<br>' + 
            '<b>Nombre Tipo Tienda: </b>' + arr[i].nombre_tipotienda + '</p>';
        }
        document.getElementById("id_tipotienda").innerHTML = out;
    }
})

Espero que esto solucione tu problema, saludos.

1
  • No lo solucioné exactamente así, pero me sirvió de mucho tu respuesta, añado la solución definitiva.
    – rafa_pe
    Commented el 14 jul. 2019 a las 11:00
1

Finalmente lo arreglé de la siguiente manera declarando [] y colocando el encode fuera del bucle.

     foreach($bucle_TiposTienda as $itemTiposTienda):
     if($contadorTiposTienda!=''){ 
         $myArr[]= array("id_tipotienda" => $itemTiposTienda['id_tipotienda'], "nombre_tipotienda" => $itemTiposTienda['nombre_tipotienda']);
     }
     endforeach;
     $myJSON = json_encode($myArr);
     echo $myJSON;

Gracias a la inestimable ayuda de @Fabian Faria en su respuesta compuse la llamada así:

  $(document).ready(function (){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myObj = JSON.parse(this.responseText);
      var out = "";
      var i;
      for(i = 0; i < myObj.length; i++) {
         out += '<option value="' + myObj[i].id_tipotienda + '">'+myObj[i].nombre_tipotienda + '</option>';
        }
        document.getElementById("id_tipotienda").innerHTML = out;
      }
    };
    xmlhttp.open("GET", "obtenerdatos.worker.php", true);
    xmlhttp.send();
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.