Изменение коллекции 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, используя eval:

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

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

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

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

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

Не нужно eval() сейчас.