查找並更新 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)