时间戳

首页 > 解决方案 > 在 JSON 中查找和更新特定对象

javascript - 在 JSON 中查找和更新特定对象

问题描述

我正在生成一个由 JSON 构造的表单。我已经成功创建了表单，但我现在正试图弄清楚如何从用户输入中更新 JSON 中的特定项目。我已经看到使用节点和下划线等提出的这个问题，但我想用 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”错误。

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'));

标签： javascriptjqueryjson

解决方案

如果我正确理解您的问题，您的表单是从上述格式的 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" />

Vanilla 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 中的值。

推荐阅读