Crear un JSON dinámicamente con cada valor de entrada usando jquery

91

Tengo una situación en la que me gustaría leer algunos datos de un formato JSON a través de PHP, sin embargo, tengo algunos problemas para comprender cómo debo construir el objeto Javascript para crear el formato JSON de forma dinámica.

Mi escenario es el siguiente:

<input title="QA" type="text" class="email">
<input title="PROD" type="text" class="email">
<input title="DEV" type="text" class="email">

El código Javascript que tengo hasta ahora pasa por cada entrada y toma los datos, sin embargo, no puedo entender cómo procesar de aquí en adelante.

var taskArray = {};

$("input[class=email]").each(function() {
  var id = $(this).attr("title");
  var email = $(this).val();

  //how to create JSON?

});

Me gustaría obtener el siguiente resultado si es posible.

[{title: QA, email: '[email protected]'}, {title: PROD, email: '[email protected]'},{title: DEV, email: '[email protected]'}]

Donde el correo electrónico es adquirido por el valor del campo de entrada.

TocinoJugo
fuente

Respuestas:

274

Me gusta esto:

function createJSON() {
    jsonObj = [];
    $("input[class=email]").each(function() {

        var id = $(this).attr("title");
        var email = $(this).val();

        item = {}
        item ["title"] = id;
        item ["email"] = email;

        jsonObj.push(item);
    });

    console.log(jsonObj);
}

Explicación

Que busca an array of objects. Entonces, crea una matriz en blanco. Cree un objeto para cada uno inputusando 'título' y 'correo electrónico' como claves. Luego agrega cada uno de los objetos a la matriz.

Si necesita una cuerda, entonces hágalo

jsonString = JSON.stringify(jsonObj);

Salida de muestra

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 
ATOzTOA
fuente
¿Por qué en estos 3 ejemplos siempre obtengo esto? 'Error de referencia no detectado: jsonObj no está definido'
Gino
@Gino ¿Copiaste, pegaste o escribiste? Vea la línea que define jsonObj.
ATOzTOA
15

No creo que pueda convertir objetos JavaScript en cadenas JSON usando solo jQuery, asumiendo que necesita la cadena JSON como salida.

Dependiendo de los navegadores a los que se dirija, puede usar la JSON.stringifyfunción para producir cadenas JSON.

Consulte http://www.json.org/js.html para obtener más información, allí también puede encontrar un analizador JSON para navegadores más antiguos que no admiten el objeto JSON de forma nativa.

En tu caso:

var array = [];
$("input[class=email]").each(function() {
    array.push({
        title: $(this).attr("title"),
        email: $(this).val()
    });
});
// then to get the JSON string
var jsonString = JSON.stringify(array);
ChrisF
fuente
10

Puede que esto ayude, preferiría JS puro siempre que sea posible, mejora el rendimiento drásticamente ya que no tendrá muchas llamadas a funciones de JQuery.

var obj = [];
var elems = $("input[class=email]");

for (i = 0; i < elems.length; i += 1) {
    var id = this.getAttribute('title');
    var email = this.value;
    tmp = {
        'title': id,
        'email': email
    };

    obj.push(tmp);
}
Salman
fuente
Big + 1 fue con esta solución, la respuesta aceptada me causó algunos problemas en IE
Bobadevv
0

Lo mismo del ejemplo anterior: si solo está buscando json (no una matriz de objetos) simplemente use

function getJsonDetails() {
      item = {}
      item ["token1"] = token1val;
      item ["token2"] = token1val;
      return item;
}
console.log(JSON.stringify(getJsonDetails()))

esta salida se imprimirá como (un json válido)

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}
Pravin
fuente