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

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.