Home / Questions / 402054
Accepted
C Aldair
Asked: 2021-10-29 08:04:42 +0800 CST 2021-10-29 08:04:42 +0800 CST

How to separate a JSON in JavaScript?

  • 772

I'm having problems when trying to separate a JSON into different values, how can I separate the json to save them in variables and be able to display them in an html input? I am using Axis.

this is the json i get;


    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"

this is the jquery axios, the data is stored in rpta and that is where I want to separate it


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;
  }
}
javascript

3 Answers

  1. Best Answer

    If I understand you correctly, by separating the json to store it in variables, you mean destructuring JSON objects.

    When you do the postwith Axios and get an object as a response, you can destruct it to access its properties.

    If the item you get consists of:

    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

    Then you can implement the destructuring in fnRespuestaObtener()like this:

    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);
  }

}
    • 1

  2. Dear, I explain how you can do it, in this case I use a public json api, in your case it uses yours, but the operation is the same.

    first you have to know how your request arrives axiosthat's why I asked you for the console.log, but I think it's the first one, in any case you would have to show it as I do it inside the fnRespuestaObtener, so that you can fill in your input.

    PDTA. Use Jqueryto fill the input, but you could do it with Javascript, let's use both as an example.

    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' />

    • 0

  3. I would do something like this:

    $.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"]);
)};

    For each data returned in the JSON it is a cycle, when indicating that the cycle is carried out in "rpta.obtenerUsuario" it will search in this how many records exist, and since there is only one it will set them' the values ​​found with the specific aliases that indicate.

    • 0