javascript - tachar - ¿Cómo puedo configurar mis datos como JSON en un campo de entrada oculto?

getelementbyid font weight

Question

Tengo un campo de entrada como el de abajo

 <input type="hidden" value="" id="inputField">

Ahora tengo una lista de productos y para cada producto tengo una casilla de verificación. Cuando un usuario hace clic en la casilla de verificación, obtengo el ID y el nombre del producto. Ahora quiero guardarlo de nuevo en el campo oculto como abajo

<input type="hidden" 
       value="[{"product_id":123,"name":"stack"},{"product_id":456,"name":"overflow"}]"
       id="inputField"
>

Mi primera pregunta es cómo puedo hacer esto y cómo puedo crear el JSON.

En segundo lugar, si el usuario vuelve a desmarcar una casilla de verificación del producto, entonces necesito obtener el valor oculto actual y convertirlo en una estructura de datos, eliminar la identificación de casilla sin marcar de la estructura de datos y luego guardarla nuevamente en el campo oculto.

¿Hay alguna biblioteca que hace este trabajo en JavaScript?

Answer 1

Añadir biblioteca

"<% @ taglib uri =" http://java.sun.com/jsp/jstl/functions "prefix =" fn "%>"

Utilice: $ {fn: escapeXml (string1)}

tipo de entrada = valor "oculto" = "$ {fn: escapeXml (string1)}" id = "inputField"

Answer 2

Como se indica en otras respuestas a continuación, para convertir JSON a cadena, use la función JSON.stringify () de esta forma:

var json = JSON.stringify([{"product_id":123,"name":"stack"}]);
document.getElementById(''inputField'').setAttribute(''value'', json);

Y obtienes la representación de cadena del objeto JSON en var json . Para hacer esto de otra manera para que pueda actualizar el objeto JSON real contenido en esa cadena, puede usar eval:

var json_object = eval("("+json+")");

Ahora, el objeto JSON original se vuelve a crear, y puede actualizarlo y volver a estrigificarlo de nuevo en un campo oculto o alguna otra var ...

Answer 3

El bloque de creación que busca es JSON.stringify y JSON.parse ;

var stringData = ''[{"product_id":123,"name":"stack"}, {"product_id":456,"name":"overflow"}]'';
// Convert a string to an JavaScript object
var arrayData = JSON.parse(stringData);
// Convert a JavaScript object to a string
stringData = JSON.stringify(arrayData);

Ahora, cada vez que una de tus casillas de verificación cambia de estado, obtendrás el objeto del campo oculto y lo modificarás. Después de la modificación del objeto, guardaría la cadena en el campo oculto.

Para leer y almacenar el valor desde / hasta el campo oculto:

var field = document.getElementById(''inputField'');
// Reading the value
stringData = field.getAttribute(''value'');
// Storing the value
field.setAttribute(''value'', stringData);

Aún te faltan las modificaciones de tu matriz, que harías de forma similar a:

// Adding a newly checked product
arrayData.push({
    product_id: …,
    name: …
});

// Removing a product from the list is more complicated
arrayData = arrayData.filter(function(product){
    var productIdToRemove = …;
    return product.product_id!==productIdToRemove;
});

Con respecto a las bibliotecas: probablemente la mayoría contiene código para facilitar la manipulación de la matriz y la configuración de los datos del formulario. Consulte la documentación de jQuery o prototipo o las otras respuestas para ver ejemplos.

Solo un pensamiento: ¿No sería más simple descartar toda la idea de usar el campo oculto y transferir las casillas de verificación al servidor? Si se marcó la casilla de verificación, úsela, de lo contrario, ignore los datos del producto correlacionados.

Answer 4

En JavaScript, simplemente asigna el valor:

var json = JSON.stringify([{"product_id":123,"name":"stack"}]);
document.getElementById(''inputField'').setAttribute(''value'', json);

En un lenguaje del lado del servidor, codifique el JSON en HTML, por ejemplo con htmlspecialchars de php o html.escape de python''s. El resultado se verá así:

<input type="hidden" id="inputField"
       value="[{&quot;product_id&quot;:123,&quot;name&quot;:&quot;stack&quot;}]">

Answer 5

Si tiene un objeto JSON, guárdelo en el campo oculto usando JSON.stringify :

var myObj = [{"product_id":123,"name":"stack"},{"product_id":456,"name":"overflow"}];
document.getElementById(''inputField'').value = JSON.stringify(myObj);

Answer 6

Todavía estoy un poco confundido acerca de su pregunta, pero si simplemente está almacenando el nombre y la identificación de las casillas de verificación de entrada que están marcadas, puede hacerlo simplemente usando jQuery.

var jsonArray = [];
$("input:checkbox:checked").each(function(){
    var jsonObj = {};
    jsonObj.product_id = $(this).attr("id");
    jsonObj.name = $(this).attr("name");
    jsonArray.push(jsonObj);
});

La variable jsonArray ahora tendrá una cadena json similar al ejemplo que has publicado. Puedes usar JSON.stringify(jsonArray) para ver esto.

No es necesario crear el campo oculto, manteniendo esta cadena como el valor e intentando agregarla y eliminarla a medida que cambian los estados de las casillas de verificación. Simplemente ejecute el javascript cuando la página esté lista para cambiar con un clic del botón, etc.

La mejor de las suertes.

Answer 7

Usando jQuery:

HTML:

<input type="hidden" value=''[{"product_id":123,"name":"stack"},{"product_id":456,"name":"overflow"}]''
 id="inputField">

JS:

var data = {}
data.products = jQuery.parseJSON($(''#inputField'').val())
alert(data.products[0].product_id) 

Answer 8

Yo sugeriría usar la función encodeURIComponent . Junto con el JSON.stringify deberíamos tener algo como lo siguiente:

var data= "{"name":"John"}";

var encodeddata encodeURIComponent(JSON.stringify(var data= "{"name":"John"}";
))

Ahora ese valor se puede almacenar de forma segura en un tipo de entrada oculta como:

<input type="hidden" value="''+encodeddata+''">

Ahora para volver a leer los datos podemos hacer algo como:

var data = JSON.parse(decodeURIComponent(value))