javascript - 在隐藏的 HTML 元素中编码和解码 JSON

Question

我正在尝试使用 HTML 和 JQuery 构建自定义控件。该控件将显示一个文本值。用户可以输入各种键/值对。目前，我有以下 HTML

<input id="keyValue" type="text" />
<select id="keyName" name="keyName">
  <option value="k1">Some Name</option>
  <option value="key2">Another Name</option>
  <option value="arg3">How about one more</option>
</select>
<input id="keyValuePairs" type="hidden" />

“keyValue”中显示的值将根据用户选择的选项而变化。我试图将映射保留在 keyValuePairs 中。为了尝试做到这一点，我有以下内容:

$('#keyName').on('change', function() {
  var key = $('#keyName').val();
  var keyValuePairs = $('#keyValuePairs').val();
  if (keyValuePairs[key]) {
    $('#keyValue').val(keyValuePairs[key]);
  } else {
    $('#keyValue').val('');
  }
});

$('#keyValue').on('change', function() {
  var key = $('#keyName').val();
  var keyValuePairs = $('#keyValuePairs').val();
  if (!keyValuePairs ) {
    keyValuePairs = {};
  }
  keyValuePairs[key] = $(this).val();
  $('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});

由于某种原因，在我选择另一个键后，文本字段始终显示空白字符串。我相信这与我编码或解码 JSON 的方式有关。当我将 console.log 添加到 keyValuePairs 时，我注意到有时包含引号，有时不包含引号。然而，代码对我来说看起来是正确的。

我做错了什么？

Answer 1

我相信您应该在阅读后使用 JSON.parse $('#keyValuePairs').val() (因为您在设置值时对这些对进行了字符串化)

更新:

您还必须确保该值不为空:

$('#keyName').on('change', function() {
    var key = $('#keyName').val();
    var val = $('#keyValuePairs').val();
    if (val && val.length > 0) {
        var keyValuePairs = JSON.parse(val);
        if (keyValuePairs[key]) {
            $('#keyValue').val(keyValuePairs[key]);
        } else {
            $('#keyValue').val('');
        }
    }
});

$('#keyValue').on('change', function() {
  var key = $('#keyName').val();
    var val = $('#keyValuePairs').val();
    var keyValuePairs;
    if (val && val.length > 0) {
        keyValuePairs = JSON.parse(val);
    } else {
        keyValuePairs = {};
    }
    keyValuePairs[key] = $(this).val();
    $('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});