Найти и обновить указанный c объект в JSON

Question

Я создаю форму, которая построена из JSON. Я успешно создал форму, но сейчас пытаюсь выяснить, как обновить указанный элемент c в JSON из пользовательского ввода. Я видел этот вопрос, задаваемый с использованием узла и подчеркивания, и т. Д. c, но я бы хотел выполнить sh с помощью 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. Я изо всех сил пытаюсь выяснить, как найти элемент по его идентификатору, а затем обновить пару значений ключа value для этого объекта.

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

Спасибо.

Это то, что я пытался, но он возвращает "может ошибка "Не удается получить доступ к идентификатору неопределенного".

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

Я предполагаю, что у вас есть массив объектов. Таким образом, вы можете фильтровать этот массив, чтобы найти объект, идентификатор которого соответствует имени соответствующего входа. А затем обновите свойство 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)

Answer 3

Если я правильно понимаю, вы можете перед отправкой в ​​json изменить строку ввода и соответственно изменить значения.

Если вам нужно сравнить с другим JSON, вы можете просто сравнить значения через функцию.

JSON - просто форматированная строка.

Answer 4

Javascript теперь поддерживает for..in , где вы можете l oop через ключи объекта:

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" />