Изменение коллекции json в jquery

Question

У меня есть список счетов, отображаемых на экране. Прямо сейчас пользователь может выбрать или снять отметку с счета-фактуры с помощью флажка или изменить сумму, которую они хотели бы заплатить. Когда это произойдет, общая сумма, подлежащая оплате для всех счетов-фактур, суммируется и отображается.

Конечной целью здесь является отслеживание массива массивов данных, поступающих с сервера. Я использую json, потому что он стандартизирован.

Тогда у меня есть скрытый с данными JSON, как так:

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

Сейчас данные есть много пустых заполнителей для данных.

То, что я пытаюсь сделать, это создать объект javascript, чтобы при возникновении событий, вызвавших возникновение суммирования, я могу инициировать целевые изменения/удаления/добавления. Вот, что у меня есть до сих пор.

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 
     } 

    } 

}(); 

Мой вопрос, как я могу легко изменить/удалить строки, а также добавлять новые строки в мой объект JSON, а затем сохранить его обратно в скрытом поле? Возможно ли это или есть лучший способ? Я открыт для предложений.

Answer 1

Вы можете преобразовать строку в скрытом ввода в JavaScript Object с помощью eval:

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

Я хотел бы сделать это только один раз, а затем делать все операции, такие как удалить на этом объекте. Когда вы будете готовы, чтобы отправить его обратно на сервер, конвертировать объект обратно в строку:

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

В качестве альтернативы, если вы можете изменить, как работает ваш сервер, получить сервер, чтобы создать <script> тег, содержащий данные готовый для использования в качестве объекта javascript - в основном строка в скрытом входе, но без кавычек вокруг всего объекта и с назначением переменной перед ним. Например. получите ваш сервер для вывода:

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

Нет необходимости в eval().