2

Intento crear un select en HTML5 trayendo los datos desde un archivo .js que tiene un $.ajax que llama a una URL que tiene datos en JSON.

Pero siempre tira para error: function(data) y no se por qué, la url está bien por lo que me imagino que será el código, os lo dejo a ver si alguien me puede ayudar.

index.html

<!DOCTYPE html>
<html>
<head>


    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="funciones_app.js"></script> 
</head>
<body onload="getData()">

<p>Sessions: 
<select id="Select"></select>


</body>
</html> 

funciones_app.js

function getData(){
	    $.ajax({
	    	type: "GET",
	    	url: 'http://.../json_tipo_productos.php', 
	    	async: false,
	    	dataType: "json",
	    	success: function(data){
	    		alert("pepe");
	    		$.each(data,function(key, registro) {
	    			var id = "";
	    		    var nombre = "";
	    		    
						$.each(registro, function(key, value) {
							//alert(campo + ": " + valor);
							if (key == "id") { id = value; }
							if (key == "nombre") { nombre = value; }
														
						});
                 }); 
			$("#select").append('<option value='+id+'>'+nombre+'</option>');		 
	    	},
	    	error: function(data) {
	    		alert('error');
	    	}
	    });
}

El Json tiene este formato:

[{"id":"6","nombre":"FLORISTERIA"},{"id":"8","nombre":"JOYERIA"}

Intento crear el select en html como veis pero siempre aparece vacio.

2 respuestas 2

5

Tu código tenia los siguientes errores:

  1. $("#select").append('<option value='+id+'>'+nombre+'</option>');, esta fuera del primer $.each
  2. El id del <select> empieza con mayuscula, es decir, deberias escribir $("#Select").
  3. async: false, esta deprecado, no lo uses.

Prueba esto:

function getData(){
  $.ajax({
    type: "GET",
    url: 'http://../json_tipo_productos.php', 
    dataType: "json",
    success: function(data){
      $.each(data,function(key, registro) {
        $("#Select").append('<option value='+registro.id+'>'+registro.nombre+'</option>');
      });        
    },
    error: function(data) {
      alert('error');
    }
  });
}

Nota: No dejo un snippet funcional porque tu server no soporta CORS

4
  • antes que nada agradecer la respuesta. Hice tus modificaciones y me sigue saliendo el alert('error')...
    – akenateb
    el 15 nov. 2016 a las 13:28
  • es porque el server no soporta CORS, revisa la consola del DevTools
    – Marcos
    el 15 nov. 2016 a las 13:28
  • Lo integro y comento. gracias de nuevo.
    – akenateb
    el 15 nov. 2016 a las 13:32
  • Perfecto. Tu solucion es la correcta.
    – akenateb
    el 15 nov. 2016 a las 13:54
0

Bueno como sugerencia el orden de tus <script>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="funciones_app.js"></script> 

Segundo, tu <select> la id es Select y no select y tercero, estas haciendo un each de más

$.each(data,function(key, registro) {
    $("#Select").append('<option value='+registro.id+'>'+registro.nombre+'</option>');                                          
}); 
0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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