Как добавить входные данные в скрытом поле ввода

Question

У меня есть поле ввода, где пользователь вводите нужный вход и данные копируются в скрытом поле ввода, но проблема возникает, когда новые данные заменяют старые данные

Здесь я скопировать все данные

$('#ap').val(JSON.stringify(data)); 

этим поле

<input type="hidden" name="ApCount" id="ap" value=""> 

входа Теперь, если я добавить данные, такие как «привет», то он добавляется к скрытому входному значению, то это выглядит как

<input type="hidden" name="ApCount" id="ap" value="hello"> 

теперь, если я снова ввести «как ты», то он заменяет старые данные новый ..

Я хочу, чтобы держать обе данные как

1 - [{"ratio":"1","size":"S","quantity":"83"},{"ratio":"2","size":"M","quantity":"166"}] 

2 - [{"ratio":"3","size":"M","quantity":"93"},{"ratio":"2","size":"M","quantity":"136"}] 

Приведенные выше данные JSON должны быть пронумерованных хранении в скрытом значении

Вот исполняемый код

$('body').on('click', '.export-btn', function() { 
    var $rows = $TABLE.find('tr:not(:hidden)'); 
    var headers = []; 
    var data = []; 

    // Get the headers (add special header logic here) 
    $($rows.shift()).find('th:not(:empty)').each(function() { 
    headers.push($(this).text().toLowerCase()); 
    }); 

    // Turn all existing rows into a loopable array 
    $rows.each(function() { 
    var $td = $(this).find('td'); 
    var h = {}; 

    // Use the headers from earlier to name our hash keys 
    headers.forEach(function (header, i) { 
     h[header] = $td.eq(i).text(); 
    }); 

    data.push(h); 
    }); 

    // Output the result 
    $('#ap').val(JSON.stringify(data)); 
}); 

Answer 1

HTML Code 

<input id="getVal" value="" /> 
<button id="addBtn">Add</button> 

// Jquery Code 

    var arrayData = []; 
    $("#addBtn").on("click", function() { 
     var currentData = $("#getVal").val(); 
     arrayData.push({ 
      "count": arrayData.length + 1, 
      "data": currentData 
     }); 
     console.log(arrayData); 
    }); 

вы получите обновленный jason каждый раз в arrayData в Json Format. Надеюсь, вы получите желаемый результат.

Answer 2

Предполагая, что у вас есть способ узнать, когда будут добавлены новые данные, и что ваш data - это массив, это может быть достигнуто путем первого получения значения и последующего ввода новых данных в стек. Например:

var data = [ 
 
    [{"ratio":"1","size":"S","quantity":"83"}, {"ratio":"2","size":"M","quantity":"166"}] 
 
]; 
 
var $apField = $('#ap'); 
 
$apField.val(JSON.stringify(data)); 
 

 

 
// sometime later on, you have an additional bit of data 
 
// let's say this is inside of an event handler that has 
 
// constructed this data for you: 
 
var newData = [{"ratio":"3","size":"M","quantity":"93"},{"ratio":"2","size":"M","quantity":"136"}]; 
 

 
// Now add it to the data already in the element 
 
var newDataSet = JSON.parse($apField.val()); // get the existing data 
 
newDataSet.push(newData); // add the new set 
 
$apField.val(JSON.stringify(newDataSet)); // update the field. 
 

 
console.log(JSON.parse($apField.val()));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="hidden" name="ApCount" id="ap" value="">