Как я могу установить мои данные как JSON в скрытом поле ввода

У меня есть поле ввода, подобное приведенному ниже

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

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

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

Мой первый вопрос: как я могу это сделать и как я могу создать JSON?

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

Есть ли библиотека, которая выполняет это задание в JavaScript?

ОТВЕТЫ

Ответ 1

Использование 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)

Ответ 2

Строковый блок, который вы ищете, JSON.stringify и 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);

Теперь, когда один из ваших флажков изменит состояние, вы получите объект из скрытого поля и измените его. После изменения объекта вы сохраните строку обратно в скрытое поле.

Чтобы прочитать и сохранить значение из/в скрытое поле:

var field = document.getElementById('inputField');
// Reading the value
stringData = field.getAttribute('value');
// Storing the value
field.setAttribute('value', stringData);

Вам по-прежнему не хватает модификаций вашего массива, который вы бы сделали схожим с:

// 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;
});

В отношении библиотек: Вероятно, большинство из них содержат код для облегчения манипулирования массивами и настройки данных формы. См. Документацию по jQuery или прототипу или другие ответы для примеров.

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

Ответ 3

В JavaScript просто присвойте значение:

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

На серверном языке кодируйте JSON в HTML, например, с помощью php htmlspecialchars или python html.escape. Результат будет выглядеть следующим образом:

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

Ответ 4

Как указано в других ответах ниже, чтобы преобразовать JSON в строку, используйте функцию JSON.stringify() следующим образом:

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

И вы получите строковое представление объекта JSON в var json. Чтобы сделать это другим способом, чтобы вы могли обновить фактический объект JSON, содержащийся в этой строке, вы можете использовать eval:

var json_object = eval("("+json+")");

Теперь исходный объект JSON воссоздается, и вы можете его обновить, а затем повторно удалить его обратно в скрытое поле или какой-либо другой var...

Ответ 5

Я все еще немного запутался в вашем вопросе, но если вы просто сохраняете имя и идентификатор из флажков ввода, которые были отмечены, вы можете сделать это достаточно просто с помощью jQuery.

var jsonArray = [];
$("input:checkbox:checked").each(function(){
    var jsonObj = {};
    jsonObj.product_id = $(this).attr("id");
    jsonObj.name = $(this).attr("name");
    jsonArray.push(jsonObj);
});

Переменная jsonArray теперь будет содержать строку json, подобную приведенному выше примеру. Вы можете использовать JSON.stringify(jsonArray), чтобы увидеть это.

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

Желаем удачи.

Ответ 6

Если у вас есть объект JSON, сохраните его в скрытом поле, используя JSON.stringify:

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

Ответ 7

Я бы предложил использовать функцию encodeURIComponent. Вместе с JSON.stringify мы должны иметь что-то вроде следующего:

var data= "{"name":"John"}";

var encodeddata encodeURIComponent(JSON.stringify(var data= "{"name":"John"}";
))

Теперь это значение можно безопасно сохранить в скрытом виде ввода, например:

<input type="hidden" value="'+encodeddata+'">

Теперь, чтобы прочитать данные назад, мы можем сделать что-то вроде:

var data = JSON.parse(decodeURIComponent(value))

Ответ 8

Добавить библиотеку

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

Использование: ${fn: escapeXml (string1)}

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