¿Cómo separar un JSON en JavaScript?

Question

Tengo problemas al intentar separar un JSON en diferentes valores, ¿cómo puedo separar el json para guardarlos en variables y poder mostrarlos en un input html? Estoy utilizando axios.

este el es json que obtengo;


    obtenerUsuario:
       apell_USUARIO: "pumbaa"
       contra_USUARIO: "1234"
       fec_REG_USUARIO: "2020-10-22T11:38:14.383"
       id_USUARIO: 2
       nom_USUARIO: "timon"
       usu_USUARIO: "local2"

este el el jquery axios, la data se almacena en rpta y es ahí donde quiero separarla


function fnObtener(){
var id= $('#txtId').val();
axios.post('http://localhost:8080/api/usu/obtenerUsuario', {
"ID_USUARIO": id
}, {
headers: {
'Content-Type': 'application/json',
}
}, {
}).then((response) => {
fnRespuestaObtener(response.data);
})
}

function fnRespuestaObtener(rpta){

  var id= $('#txtId').val();
  var nombre=$('#txtNombres').val();
  var apellido=$('#txtApellidos').val();
  var usuario=$('#txtUsuario').val();
  var contrasea=$('#txtContrasena').val();

  if(id=="ID_USUARIO"){
    nombre.text=nom_USUARIO;
    apellido.text=apell_USUARIO;
    usuario.text=usu_USUARIO;
    contrasea.text=contra_USUARIO;
  }
}

fijate como responde un `console.log(response.data)` dependiendo de eso, puedes ver como usar el `json`, si puedes colocalo dentro de la pregunta. Suponiendo que la primera parte del codigo sea la respuesta, te bastaría cambiar la forma como la usas dentro de tu funcion a por ejemplo `nombre.text=rpta.nom_USUARIO;` — Felipe Urcia, Oct 28 '20 at 16:14
[JSON != JS Object](https://es.stackoverflow.com/questions/164943/cu%c3%a1l-es-la-diferencia-entre-json-y-un-objeto-en-javascript) — Pablo Lozano, Oct 28 '20 at 16:19
@FelipeUrcia pongo nombre.text=rpta.nom_USUARIO; pero me sale en el nombre = undefined — C Aldair, Oct 28 '20 at 16:25
Tienes un problema, no sólo con la forma en que manejas la respuesta, sino en como pretendes asignarla. `$('#identif').val()` devuelve el valor del elemento identificado por `#identif`. Por lo tanto las variables a las que pretendes asignarle este valor serán de tipo `String` o `Array` o serán `undefined`. Saludos — Mauricio Contreras, Oct 28 '20 at 16:30

score 1 · Accepted Answer · answered Oct 28 '20 at 16:39

Si te entiendo bien, con separar el json para guardarlo en variables te refieres a hacer una destructuración de objetos JSON.

Cuándo haces el post con Axios y obtienes como respuesta un objeto, puedes destructurarlo para acceder a sus propiedades.

Si el objeto que obtienes consiste en:

obtenerUsuario:
   apell_USUARIO: "pumbaa"
   contra_USUARIO: "1234"
   fec_REG_USUARIO: "2020-10-22T11:38:14.383"
   id_USUARIO: 2
   nom_USUARIO: "timon"
   usu_USUARIO: "local2

Entonces puedes implementar la destructuración en fnRespuestaObtener() así:

function fnRespuestaObtener(rpta){
  const {apell_USUARIO,contra_USUARIO,fec_REG_USUARIO,id_USUARIO,nom_USUARIO,usu_USUARIO} = rpta.obtenerUsuario;

  if(id==id_USUARIO){
    $('#txtId').val(id_USUARIO);
    $('#txtNombres').val(nom_USUARIO);
    $('#txtApellidos').val(apell_USUARIO);
    $('#txtUsuario').val(usu_USUARIO);
    $('#txtContrasena').val(contra_USUARIO);
  }

}

genial ,¿ como los imprimo en los input de html? – C Aldair Oct 28 '20 at 21:14 — C Aldair, Oct 28 '20 at 21:14
Usando JQuery con selectores y `.val()` – FranAcuna Oct 28 '20 at 21:41 — FranAcuna, Oct 28 '20 at 21:41
un ejemplo porfavor amigo , si no es molestia :) – C Aldair Oct 29 '20 at 21:00 — C Aldair, Oct 29 '20 at 21:00

score 0 · Answer 2 · answered Oct 28 '20 at 16:30

Estimado, te explico como puedes hacerlo, en este caso utilizo un json api publico, en tu caso utiliza el tuyo, pero el funcionamiento es el mismo.

primero tienes que saber como llega tu request axios es por eso que te pedi el console.log, pero creo que es el primero, en todo caso tendrias que mostrarlo como lo hago dentro de la fnRespuestaObtener, de tal manera que puedas rellenar tu input.

PDTA. Use Jquery para rellenar el input, pero podrías hacerlo con Javascript, deje ambos de ejemplo.

function fnObtener() {
  axios.post('https://www.londonprayertimes.com/api/times/?format=json&key=2a99f189-6e3b-4015-8fb8-ff277642561d&24hours=true', {
    headers: {
      'Content-Type': 'application/json',
    }
  }, {}).then((response) => {
    console.log(response.data)
    fnRespuestaObtener(response.data);
  })
}

function fnRespuestaObtener(rpta) {
  $('#prueba').val(rpta.city)
  document.getElementById("prueba2").value = rpta.date;
}
fnObtener();

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='prueba' />
<input id='prueba2' />

score 0 · Answer 3 · edited Nov 03 '20 at 17:32

0

Yo haría algo así:

$.each(rpta.obtenerUsuario, function(key,value){
 nombre.text=String(value["nom_USUARIO"]);
 apellido.text=String(value["apell_USUARIO"]);
 usuario.text=String(value["usu_USUARIO"]);
 contrasea.text=String(value["contra_USUARIO"]);
)};

Por cada dato devuelto en el JSON es un ciclo, al indicarle que el ciclo se realice en "rpta.obtenerUsuario" buscara en este cuantos registros existen, y al existir solo uno los va a setear' los valores encontrados con los alias específicos que le indiques.

edited Nov 03 '20 at 17:32

Jorgesys

103,630
13
52
124

answered Oct 28 '20 at 16:43

HectorCPR

1
1

1

¿y este código que realizaría?, revisar [answer]. – Jorgesys Nov 02 '20 at 16:02
Es un ciclo, por cada dato devuelto en el JSON es un cliclo, al indicarle que el ciclo se realice en "rpta.obtenerUsuario" buscara en este cuantos registros existen, y al existir solo uno los va a setear' los valores encontrados con los alias específicos que le indiques. – HectorCPR Nov 03 '20 at 17:28
Gracias Hector, trata de agregar esa información a tus preguntas y te aseguro serán de utilidad para más usuarios de la comunidad. – Jorgesys Nov 03 '20 at 17:31

¿Cómo separar un JSON en JavaScript?

3 Answers3