查找并更新 JSON 中的特定对象

Question

我正在生成一个由 JSON 构造的表单。 我已经成功创建了表单，但我现在想弄清楚如何从用户输入中更新 JSON 中的特定项目。 我已经看到使用 node 和下划线等提出的这个问题，但我想用 vanilla JS 或 jQuery 来完成这个。

我试图避免修改除值以外的 JSON，因为它需要以相同的格式发回，并且我能够通过其键或值找到一个项目，但是我遇到的问题是有多个 k /v 在我使用的每个对象中配对。 这是一个示例对象：

var list = {
"parent": {
   "item" : {
      "id" : "a1b295",
      "name" : "sample name",
      "value" : "this is a sample value"
   }
}

我的表单元素显示为<input type="text" name="a1b295" value="this is a sample value" />

我想要做的是提交，遍历表单元素并更新 JSON 中的每个对象。 我正在努力弄清楚如何通过其 id 查找项目，然后更新该对象的value键值对。

为清楚起见，数据可以有任意数量的嵌套子项，我需要追踪具有特定 ID 的子项，这些 ID 已经转换为表单输入。

谢谢你。

这是我尝试过的，但它返回“无法访问未定义的 id”错误。

function traverseData(data, obj)
  {
      for (var k in data)
      {
          if (typeof data[k] == "object" && data[k] !== null) {
              traverseData(obj[k], obj);
          } else if (!data.hasOwnProperty(k)) {
            continue;
          } else if (k = obj) {
            console.log(obj);
          }
      }
  }

  traverseData(data, $(this).attr('id'));

Answer 1

如果我正确理解了您的问题，您的表单是从上述格式的 JSON 数组生成的，并且想要使用提交时可能已更改的新值更新该 JSON 数组中的值。

以下代码假定您的表单已正确设置，并且文本值已使用 HTML 部分中的值进行更新。

jQuery 解决方案

 const json = [ { "item": { "id": "a1b295", "name": "sample name", "value": "this is a sample value" } }, { "item": { "id": "a1b296", "name": "sample name", "value": "this is a sample value" } }, { "item": { "id": "a1b297", "name": "sample name", "value": "this is a sample value" } }, { "item": { "id": "a1b298", "name": "sample name", "value": "this is a sample value" } } ] for (const item in json) { json[item].item.value = $('input[name="' + json[item].item.id + '"]').val() } console.log(json)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="a1b295" value="this is a sample value" /> <input type="text" name="a1b296" value="New sample value1" /> <input type="text" name="a1b297" value="New sample value2" /> <input type="text" name="a1b298" value="New sample value3" />

原生 Javascript 解决方案

 const json = [ { "item": { "id": "a1b295", "name": "sample name", "value": "this is a sample value" } }, { "item": { "id": "a1b296", "name": "sample name", "value": "this is a sample value" } }, { "item": { "id": "a1b297", "name": "sample name", "value": "this is a sample value" } }, { "item": { "id": "a1b298", "name": "sample name", "value": "this is a sample value" } } ] for (const item in json) { json[item].item.value = document.querySelector('input[name="' + json[item].item.id + '"]').value } console.log(json)

 <input type="text" name="a1b295" value="this is a sample value" /> <input type="text" name="a1b296" value="New sample value1" /> <input type="text" name="a1b297" value="New sample value2" /> <input type="text" name="a1b298" value="New sample value3" />

这些示例覆盖了您可以随表单提交的json变量中的值。 您应该看到json值已更新为 HTML 中的值。

Answer 2

Javascript 现在支持for..in ，您可以在其中循环遍历对象键：

 let data = { "item" : { "id" : "a1b295", "name" : "sample name", "value" : "this is a sample value" } }; function traverseData(data, obj, newValue) { for (var k in data) { if (data.hasOwnProperty(k) && typeof data[k] == "object") { data[k] = traverseData(data[k], obj, newValue); } else if (k == obj) { console.log(obj); data[k] = newValue; } } return data } //single element $('input').blur(function(event){ data = traverseData(data, 'value', $(this).attr('value')); console.log(data); }); //multiple elements $('input').each(function (index) { let self = $(this); //to differenciate between elements self.blur(function(event){ data = traverseData(data, 'value', $(this).attr('value')); console.log(data); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="a1b295" value="this is a sample value 2" />

Answer 3

如果我理解正确，您可以在提交到 json 之前更改输入字符串并相应地更改值。

如果您需要与另一个 JSON 进行比较，您可以通过函数比较值。

JSON 只是一个格式化的字符串。

Answer 4

我假设你有一个对象数组。 所以你基本上可以过滤这个数组来找到id与相应输入名称匹配的对象。 然后使用输入值更新此对象的 value 属性。

  const targetInput = document.getElementById('inputId')
  let newValue = targetInput.value
  let inputName = targetInput.name
  // We filter objects to find the one where id matches input's name
  let targetObject = objects.filter(i => i.item.id === inputName)
  targetObject[0].item.value = newValue
  console.log(targetObject)