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: 'a@a.com'}, {title: PROD, email: 'b@b.com'},{title: DEV, email: 'c@c.com'}]

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

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"}] 

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

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

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"
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.