json添加新元素并使用js更新旧元素答案

【问题标题】：json adding new element and updating old element using jsjson添加新元素并使用js更新旧元素
【发布时间】：2020-06-27 11:26:51
【问题描述】：

我有不同变量的用户输入字段，这意味着用户可以输入很多不同的值。我想将这些值保存在分配给它们的对象的 id 下。在 json 变量中添加它们时，只会添加对象的一个实例，以后的任何插入都会导致当前变量的更新。

 var items = {id: `${ID}`, name: `${name}`}

我希望将 json 变量作为数组保存在这样的文件中

 var items = [
              {id: `${ID}`, name:`${name}`},
              {id: `${ID}`, name:`${name}`}
             ]

如果已经有一个具有相同 id 的项目，我也不希望添加一个项目，而是在更新时会更好

【问题讨论】：

您希望在单击按钮时将其添加到数组中吗？
是的，我有一个保存按钮，可以调用 json 所在的函数
我发了答案，请看一下。

标签： javascript html jquery arrays json

【解决方案1】：

给你，这是通用解决方案。

function AddToItems() {

  var length = (document.getElementsByTagName("INPUT").length);
  var elements = document.getElementsByTagName("INPUT");
  var items = [];
  for (let i = 0; i < length; i++) {
    items.push({
      id: elements[i].id,
      name: elements[i].value
    });
  }
  console.log(items);
}

Input1: <input type="text" id="input_1"/>
Input2: <input type="text" id="input_2"/>
Input3: <input type="text" id="input_3"/>
<button type="submit" onclick="AddToItems()">
Submit
</button>

【讨论】：

这是一个很好的解决方案，但在我的情况下，变量不仅仅是输入，还有它们附加到它的图像。（即用户给出图像名称或标题），我希望它们按图像而不是按输入存储。并且用户可以根据需要添加任意数量的图像..所以我无法预测循环 .push 函数的时间。如果您有任何建议，请告诉我。
根据问题，提到了输入，所以我继续并给出了解决方案。如果是这种情况，我会建议使用 document.querySelectorAll()。供参考，请查看此developer.mozilla.org/en-US/docs/Web/API/Document/…

【解决方案2】：

你可能想要这样的东西

let id=document.getElementById("id")
let Name=document.getElementById("name")
let insert=document.getElementById("insert")


data=[]

insert.addEventListener("click",()=>{
     ID=id.value
     name=Name.value
      console.log("clicked")

   
var items = {id: `${ID}`, name:`${name}`}
    // data.forEach(ele => {
     if(!data.some(x=>x.id==ID)) data.push(items) 
     else{
     data.forEach(ele =>{
       if(ele.id==ID) data.splice(data.indexOf(ele),1),data.push(items)
     })

     }
   
console.log(data)

})

<body>
  <div id="banner-message">
    <p>Hello World</p>
    <input id="id">
      <input id="name">
    <button id="insert">Change color</button>
  
  </div>
  
</body>

【讨论】：