4

¿Cómo puedo poner el valor de un JSON en un input?. Tengo este código:

{"db":{"d_confirmado":49,"d_reservado":30,"d_no_consulta":7,"d_observado":0,"d_institucional":0,"d_club_salud":63,"d_madre_ni":6,"d_cia_seg":9}}

y quiero mostrarlo así:

$('#db_confirmado').val(db_confirmado);

Pero lo que quiero es que haga un recorrido por si existe el div con el mismo nombre, entonces que ingrese el valor.

NOTA: No quiero escribir todos los div, sino que se haga un recorrido.

3 respuestas 3

3

Estás usando jQuery, así que podrías utilizar each() para iterar por los diferentes elementos del objeto. El formato sería el siguiente:

$.each(ARRAY_U_OBJETO, function(indice, valor) {
    // operaciones que se aplicarán para cada elemento del array/objeto
});

Aqui te dejo un ejemplo con el código que compartiste:

var datos = {"db":{"d_confirmado":49,"d_reservado":30,"d_no_consulta":7,"d_observado":0,"d_institucional":0,"d_club_salud":63,"d_madre_ni":6,"d_cia_seg":9}};

$.each(datos.db, function(indice, valor) {
   console.log(indice + " = " + valor);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Y un ejemplo que rellena los elementos HTML si el ID existe y coincide con el índice:

var datos = {"db":{"d_confirmado":49,"d_reservado":30,"d_no_consulta":7,"d_observado":0,"d_institucional":0,"d_club_salud":63,"d_madre_ni":6,"d_cia_seg":9}};

// variable que contendrá la suma de todos los valores
var suma_total = 0;

$.each(datos.db, function(indice, valor) {
   // solo se escribe el valor si no es cero
   if (valor !=0) { 
     // añade el valor a la suma total
     suma_total += valor;
     $("#" + indice).text(valor); 
   }
});

// muestra el total de la suma
alert("La suma total es " + suma_total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Confirmado: <span id="d_confirmado"></span><br/>
Reservado: <span id="d_reservado"></span><br/>
Observado: <span id="d_observado"></span><br/>
No consulta: <span id="d_no_consulta"></span>

6
  • Gracias, me sirvió y me lo pinto, una consulta si le diera una validación? en caso si es 0 que no me imprima el valor??
    – Jean Paul
    el 17 jun. 2016 a las 20:54
  • 2
    En ese caso solo necesitas un if dentro del each(). Algo como esto: if (valor != 0) { $("#" + indice).text(valor); }
    – Alvaro Montoro
    el 17 jun. 2016 a las 21:03
  • 1
    @JeanPaul he actualizado la demo para que sólo escriba los valores si no son cero
    – Alvaro Montoro
    el 17 jun. 2016 a las 21:04
  • Gracias, una ultima consulta, como puedo hacer para sumar todos los "Valor"? y que me muestre en otro DIV ID distinto???
    – Jean Paul
    el 17 jun. 2016 a las 21:12
  • 2
    @JeanPaul he cambiado la demo para que se ajuste a la última consulta. La idea es simple: crear una variable fuera del bucle, y sumarle valor en cada iteración del each.
    – Alvaro Montoro
    el 17 jun. 2016 a las 21:18
2

Si entendí bien el problema, la solución podría ser así, donde miJson es el JSON que pones en la pregunta:

var misValores = JSON.parse(miJson);

// recorrer objeto
$.each( misValores.db, function( key, valor ) {

  // detectar si hay un elemento en el DOM con id igual a la llave del JSON
  if ($('#'. key).html().length) {
    $('#' . key).val(valor);
  }

});
3
  • No me salio :/ tengo estos input <input id="d_confirmado" type="text" value="">
    – Jean Paul
    el 17 jun. 2016 a las 18:54
  • No me marca error, pero no me pone el valor en el id :/
    – Jean Paul
    el 17 jun. 2016 a las 18:59
  • No lo puedo probar ahora, intenta quitando el método .html() dejando solo la propiedad length
    – Shaz
    el 17 jun. 2016 a las 19:11
1

Si bien aquí te dejo una muestra de como puedes hacerlo sin Librerias externas, esta escrito en JS Nátivo. Puedes modificar el código a tus necesidades.

//Estos son los datos que tu tienes
var da = '{"db":{"d_confirmado":49,"d_reservado":30,"d_no_consulta":7,"d_observado":0,"d_institucional":0,"d_club_salud":63,"d_madre_ni":6,"d_cia_seg":9}}';
//Les damos un parse con JSON
var data = JSON.parse(da);

//Iteramos los datos con un for in
for(var a in data){
var b = data[a]; 
  for(var c in b){ //Iteramos sobre los posibles campos; d_confirmado, d_reservado, etc. etc.
    var d = b[c];
    var inp = document.querySelector("#"+c); //Buscamos en el documento el input que tenga ID; d_cofirmado, etc. etc.
    (inp) ? (inp.value = d):false; // Si existe el campo, le asignamos el valor
  }
}
<input id="d_confirmado" /><br/>
<input id="algun otro" />

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.