JQuery - Manejo de datos Json con Jquery

Manejo de datos Json con Jquery

Publicado por Ersse (6 intervenciones) el 22/09/2015 17:30:22

Hola, soy nuevo en esto y me sale todo mal u.u
Quiero validar un formulario solo con los datos que tengo almacenados en un archivo json pero no se cual es el problema...
Les dejo el script asi me dicen si est bien encaminado o estoy metiendo cualquier cosa

<script>

$("form").submit(function()

	$.getJSON( "data/users.json", function(datos) {

	alert("Welcome! ");

	$.each(datos), (function(usuario)

			if($('input["id=exampleInputEmail1"]').value() == $('usuario.user').value())

				if($('input["id=exampleInputPassword1"]').value() == $('usuario.password').value())

					alert("Welcome! ");

				else

					console.log("Usuario no valido! ");

			else

				alert("Usuario no valido! ");

});

});

});

</script>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 302

Manejo de datos Json con Jquery

Publicado por xve (673 intervenciones) el 22/09/2015 19:24:45

Hola, la verdad es que sin ver el formulario, y sin saber que hay en el archivo users.json, se hace un poco difícil...

Las cosas que veo...

$('input["id=exampleInputEmail1"]')

Yo lo cambiaria por esto:

$("#exampleInputEmail1")

De la manera que lo haces, yo nunca lo he hecho, y no se si funciona!!!

Que es usuario en el formulario?

$('usuario.user')

Si nos puedes comentar, intento ayudarte!!!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Manejo de datos Json con Jquery

Publicado por Ersse (6 intervenciones) el 24/09/2015 01:07:27

Este es el formulario:

<form>

	<div class="col-md-6 form-group">

		<label for="exampleInputEmail1"> E-mail address:</label>

			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

			<div class="checkbox">

			<label>

				<input type="checkbox"> Keep me signed in

			</label>

		</div>

		<button id="target" type="submit" class="btn btn-primary">SIGN IN</button>

	</div>

	<div class="col-md-6 form-group">

		<label for="exampleInputPassword1"> Password</label>

		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

		<a href="#"><p class="help-block">Forgot your password?</p></a>

	</div>

</form>

Quise hacerlo en 2 columnas asi:
Label -------------------------- Label
Text ------------------------------- Text
CheckBox ----------------------Link
Submit

Y el Json;

{       user:aaaa@ee;

        password:1111a;

      user:eeeeeee@iii;

     password:bb2222;

Valora esta respuesta

Comentar

Manejo de datos Json con Jquery

Publicado por Ersse (6 intervenciones) el 24/09/2015 01:15:36

Ya hice los cambios a los id y sigue sin funcionar u.u

Usuario era la info que saca de la funcion(datos) ..como dije soy nuevo en esto y se me complica mucho.

Valora esta respuesta

Comentar

Pos: 12

Val: 27

Manejo de datos Json con Jquery

Publicado por Vainas (96 intervenciones) el 24/09/2015 08:36:04

Buenas de nuevo:

Enseñanos el nuevo codigo con los cambios para ver que falla ahora.

Tambien podrias mostrar el json para ver que estructura lleva.

Saludos.

Valora esta respuesta

Comentar

Manejo de datos Json con Jquery

Publicado por Ersse (6 intervenciones) el 24/09/2015 08:49:50

Solo hice los cambios que me señalaron en la sintaxis (ID y parentesis). El archivo json ya lo subi en el comentario anterior, esta al final de todo.

<script>

$("form").submit(function()

	$.getJSON( "data/users.json", function(datos) {

	alert("Welcome! ");

	$.each(datos, function(a,usuario)

			if($('input["#exampleInputEmail1"]').value() == $('usuario.user').value())

				if($('input["#exampleInputPassword1"]').value() == $('usuario.password').value())

					alert("Welcome! ");

				else

					console.log("Usuario no valido! ");

			else

				alert("Usuario no valido! ");

});

});

});

</script>

Valora esta respuesta

Comentar

Pos: 12

Val: 27

Manejo de datos Json con Jquery

Publicado por Vainas (96 intervenciones) el 24/09/2015 18:43:54

Buenas:

Al principio las cosas se complican y es normal. Simplemente tienes que tener calma. Primero que nada tienes que mirar la documentacion de jQuery en todo momento para saber que desvuelve y que paremetros se le pasan a las funciones.

Como Segunda recomendacion tienes que aprender a utilizar la consola de chrome u otro navegador para ver si tienes algun error en alguna linea.

Veo que no has cambiado esto que dijo xve:

Esto:

$('input["id=exampleInputEmail1"]')

Por esto:

$("#exampleInputEmail1")

Lo mismo para password.

Luego tambien he comentado esto y no lo has hecho:

No es $('usuario.user') es:

$.each(datos, function(a,usuario){

     if($('#exampleInputEmail1"]').value() == usuario.user){

....

Alli mismo tienes otro error. si buscas la funcion value no existe para jQuery sino que se llama val(). Si quieres usar value tendrias que obtener el objeto DOM del input y no el objeto jQuery del input (no es lo mismo no).

Sobre el json:

En realidad no estas enviando un json por que no esta bien formado y eso puede dar problemas. Tienes aqui como se forma un json: http://www.json.org/ y aqui para validarlo: http://jsonlint.com y si introduces tu json esta mal formado:

las claves tienen que estar dentro de comillas y si los valores son cadenas tambien asi que quedaria asi (aun faltan cosas):

{       "user" :"aaaa@ee";

        "password" : "1111a";

      "user":"eeeeeee@iii";

     "password":"bb2222";

Segundo: los json no se separan con ";" sino con "," (tanto entre valores como entre los objetos):

{       "user" :"aaaa@ee",

        "password" : "1111a"

},

      "user":"eeeeeee@iii",

     "password":"bb2222"

Tercero: json es como un arbol asi que no puedes enviarlo asi sino que tiene que ser un array por ejemplo:

[{"user": "aaaa@ee", "password": "1111a"},{"user": "eeeeeee@iii", "password": "bb2222"}]

Pasanos de nuevo con los cambios a ver que vas logrando.

Como ultimo se me olvida comentar que un boton submit tiene un problema y es que refresca la pagina ya que intenta enviar valores al servidor asi que sino quieres que refresque tienes que colocar esto:

$("form").submit(function(event){

	event.preventDefault();

//... el resto de tu codigo

Saludos.

Valora esta respuesta

Comentar

Pos: 12

Val: 27

Manejo de datos Json con Jquery

Publicado por Vainas (96 intervenciones) el 23/09/2015 10:58:25

Buenas:

Hay muchos errores en el codigo.

1. no es each(datos),( function.... es

$.each(datos, function(usuario){

....

2. No es $('usuario.user') es:

if($('input["id=exampleInputEmail1"]').value() == usuario.user){

....

si estas refiriendote al usuario que viene del function(usuario)

Una recomendacion. No uses esto sino para hacer pruebas. Estas enviando al navegador de cada cliente TODOS los usuarios con los que quieres validar y luego haces las comprobaciones. Deberias enviar los datos del cliente por ajax al servidor y alli validar si es correcto o no ya que asi el usuario no puede ver los datos de los usuarios. No se si me explico bien.

Saludos.

Valora esta respuesta

Comentar

Manejo de datos Json con Jquery

Publicado por Ersse (6 intervenciones) el 23/09/2015 20:03:41

Hola! Gracias por contestar!
No estoy programando un login al servidor. Es simplemente una comprobacion de datos para tirar una pequeña notificacion.

Valora esta respuesta

Comentar

Pos: 12

Val: 27

Manejo de datos Json con Jquery

Publicado por Vainas (96 intervenciones) el 23/09/2015 19:09:17

Buenas de nuevo:

Otra cosa que he visto es la forma que accedes a los objetos en la function. tienes que ponerlo asi:

$.getJSON( "data/users.json", function(datos) {

	alert("Welcome! ");

	$.each(datos, function(clave, valor){

...}

Aqui la documentacion. hay ejemplos para cuando es un array y cuando es un objeto: http://api.jquery.com/jquery.each/

Saludos.

Valora esta respuesta

Comentar

Manejo de datos Json con Jquery

Publicado por Ersse (6 intervenciones) el 25/09/2015 04:06:06

Hola! Gracias a todos los que respondieron!
Pude resolver el código y funciona perfectamente, fui agregando todo lo que me dijeron.
Lo dejo por si a alguien mas le sirve!

<script>

$('form').submit(function(event)

	event.preventDefault();

	$.getJSON( "data/users.json", function(datos)

		$.each(datos, function(a,usuario)

				if($("#exampleInputEmail1").val() !== usuario.user)

					alert("Usuario no valido! ");

				else

					if($("#exampleInputPassword1").val() == usuario.password)

						alert("Welcome! ");

					else

						alert("Contraseña no valida! ");

});

);

});

</script>

Valora esta respuesta

Comentar

<font><font>Manejo de datos Json con Jquery</font></font>

Publicado por Kirt (1 intervención) el 09/09/2017 06:18:21

forma un json y aqui para validarlo: json formatter

Valora esta respuesta

Comentar

Lista desplegable que modifique una casilla de texto

Carrousel de imagenes PHP, JQUERY, CSS