Modification d'une collection json dans jquery

Question

J'ai une liste de factures affichée à l'écran. À l'heure actuelle, un utilisateur peut sélectionner ou désélectionner une facture avec une case à cocher ou modifier le montant qu'il souhaite payer. Lorsque cela se produit, le montant total à payer pour toutes les factures est résumé et affiché.

Le but ultime ici est de garder trace d'un tableau de tableaux de données, qui vient du serveur. J'utilise JSON parce que c'est standardisé.

Puis j'ai un caché avec des données JSON comme ceci:

<input id="InvoicingGridRows" name="InvoicingGridRows" type="hidden" 
value="[[{&quot;Value&quot;:&quot;TST-1000&quot;},{&quot;Value&quot;:346.230000}, 
{&quot;Value&quot;:null},{&quot;Value&quot;:null},{&quot;Value&quot;:null}, 
{&quot;Value&quot;:null}], 
[{&quot;Value&quot;:&quot;TST-1001&quot;}, 
{&quot;Value&quot;:126.970000},{&quot;Value&quot;:null},{&quot;Value&quot;:null}, 
{&quot;Value&quot;:null},{&quot;Value&quot;:null}]]" /> 

En ce moment, les données a beaucoup d'espaces réservés vides pour les données. Ce que j'essaye de faire est de créer un objet javascript de sorte que quand les événements se produisent au-dessus qui provoquent l'addition, je peux lancer des éditions ciblées/suppressions/additions. Voici ce que j'ai jusqu'ici.

var invoiceRows = function() { 
    var targetControl = ''; 

    var getByInvoiceId = function (invoiceId) { 
     var data = $(targetControl.val()); 

     for (var x = 0; x < data.length; x++) { 
      if (data[x][0].Value == invoiceId) 
       return data[x]; 
     } 

     return null; 
    }; 

    return { 

     init: function (selector, invoices) { 
      targetControl = $(selector); 

      //set up the gridrows to defaulted values 
      targetControl.val(invoices); 
     }, 

     save: function (invoiceId, amount) { 
      var invoiceData = getByInvoiceId(invoiceId); 

      if (invoiceData) { 
       //update 
      } else { 
       //add new 
      } 
     }, 

     remove: function (invoiceId) { 
      //remove row with invoiceid 
     } 

    } 

}(); 

Ma question est de savoir comment puis-je modifier facilement/supprimer des lignes ainsi que d'ajouter de nouvelles lignes dans mon objet JSON, puis enregistrez-le dans le champ caché? Est-ce possible ou existe-t-il un meilleur moyen? Je suis ouvert aux suggestions.

Answer 1

Vous pouvez convertir la chaîne dans l'entrée cachée dans un objet javascript en utilisant eval:

var dataObj = eval($("#InvoicingGridRows").val()); 

Je ferais cela une seule fois, puis effectuez toutes vos opérations telles que supprimer sur cet objet. Lorsque vous êtes prêt à envoyer au serveur, reconvertir l'objet en une chaîne:

var dataStr = JSON.stringify(dataObj); 
$("#InvoicingGridRows").val(dataStr); 

Alternativement, si vous pouvez modifier la façon dont fonctionne votre serveur, obtenir le serveur pour créer une balise <script> contenant les données prêt à l'emploi en tant qu'objet javascript - essentiellement la chaîne dans l'entrée cachée, mais sans les guillemets autour de l'ensemble et avec une assignation de variable en face d'elle. Par exemple. obtenir votre serveur à la sortie:

<script type="text/javascript"> 
    var dataObj = {...}; 
</script> 

Pas besoin de eval() maintenant.