Comment puis-je définir mes données en tant que JSON dans un champ de saisie masqué

J'ai un champ de saisie comme celle ci-dessous

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

Maintenant, j'ai la liste de produits et pour chaque produit, j'ai une case à cocher. Lorsqu'un utilisateur clique sur la case, j'ai l'id de produit et le nom. Maintenant, je veux l'enregistrer à nouveau dans le champ caché comme ci-dessous

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

Ma première question est comment je peux faire et comment puis-je créer le JSON?

Deuxièmement, si l'utilisateur supprime un produit case, puis j'ai besoin d'obtenir le courant caché de la valeur et de la convertir en quelques structures de données, de supprimer le décochée id de la structure de données, puis enregistrez-le à nouveau dans le champ caché.

Est-il de la bibliothèque qui fait ce travail en JavaScript?

source d'informationauteur user882196

javascript json

À l'aide de 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)

3

Les blocs de construction que vous recherchez sont JSON.stringify et 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);
```
Maintenant, chaque fois que l'une de vos cases à cocher change d'état, vous obtiendrez l'objet dans le champ caché et de le modifier. Après la modification de l'objet, vous souhaitez enregistrer la chaîne vers le champ caché.

De lire et de stocker la valeur de/pour le champ caché:
```
var field = document.getElementById('inputField');
//Reading the value
stringData = field.getAttribute('value');
//Storing the value
field.setAttribute('value', stringData);
```
Vous manque encore la modification de votre tableau qui vous ferait similaires à:
```
//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;
});
```
Concernant les bibliothèques: Probablement la plupart ne contient le code pour faciliter la matrice de la manipulation et à l'environnement de données du formulaire. Consultez la documentation de jQuery ou prototype ou l'autre des réponses pour des exemples.

Juste une pensée: ne Serait-il pas plus simple de jeter l'idée d'utiliser le champ caché et transférer les cases à cocher pour le serveur à la place. Si la case est cochée, l'utiliser, sinon ignorer la corrélation des données de produit.

En JavaScript, suffit d'attribuer la valeur:

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

Dans un langage côté serveur, encoder au format JSON dans le HTML, par exemple avec php htmlspecialchars ou python html.escape. Le résultat ressemblera à ceci:

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

2

Comme il est indiqué dans d'autres réponses ci-dessous, à convertir en JSON à la chaîne, l'utilisation de JSON.stringify() la fonction comme ceci:
```
var json = JSON.stringify([{"product_id":123,"name":"stack"}]);
document.getElementById('inputField').setAttribute('value', json);
```
Et vous obtenez une représentation de chaîne d'objet JSON dans var json. Pour ce faire, d'autres chemin de ronde, de sorte que vous pouvez mettre à jour le véritable objet JSON contenues dans cette chaîne, vous pouvez utiliser la fonction eval:
```
var json_object = eval("("+json+")");
```
Maintenant, d'origine objet JSON est recréé, et vous pouvez les mettre à jour, et re-strigify il est de retour à champ caché ou certains autres var...
1

Je suis encore un peu confus au sujet de votre question, mais si vous êtes tout simplement de stocker le nom et l'id de l'entrée des cases qui sont cochées, vous pouvez le faire très simplement à l'aide de 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 détient désormais une chaîne json similaire à l'exemple que vous avez posté. Vous pouvez utiliser JSON.stringify(jsonArray) voir.

Il n'est pas nécessaire de créer le champ caché, la tenue de cette chaîne de la valeur et d'essayer d'ajouter et de supprimer de case états changement. Il suffit d'exécuter le javascript lorsque la page est prête à changer via le bouton de clic, etc.

Meilleur de la chance.

Si vous avez un objet JSON, l'enregistrer dans le champ caché à l'aide de JSON.stringify:

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

0

Je vous suggérons d'utiliser le encodeURIComponent fonction. En collaboration avec le JSON.stringify nous devrions avoir quelque chose comme ce qui suit:
```
var data= "{"name":"John"}";

var encodeddata encodeURIComponent(JSON.stringify(var data= "{"name":"John"}";
))
```
Maintenant que la valeur peut être stocké en toute sécurité dans un input type hidden:
```
<input type="hidden" value="'+encodeddata+'">
```
Maintenant pour lire les données du retour, nous pouvons faire quelque chose comme:
```
var data = JSON.parse(decodeURIComponent(value))
```
-1

Ajouter de la bibliothèque

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

Utiliser: ${fn:escapeXml(string1)}

input type="hidden" value="${fn:escapeXml(string1)}" id="inputField"

Vous devez vous connecter pour publier un commentaire.