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.