在javascript中将对象推送到数组答案

【问题标题】：Pushing object to array in javascript在javascript中将对象推送到数组
【发布时间】：2019-01-23 21:37:33
【问题描述】：

我是 javascript 的新手。我在谷歌和stackoverflow中搜索，我找不到解释。我有一个必须保存在 json 中的输入，并且我不想在控制台中显示它。我已将输入中的元素添加到数组中，但它仍在一个数组中添加。我想要这样的东西：

[
  {"id":"1","name":"Anna"},
  {"id":"2","name":"Mark"}
]

当我在现场检查并单击“删除”按钮时，我想从数组中删除一个对象。

var arr = [];

  
 
function addTo() {
    arr.push(document.getElementById("index").value);
    arr.push(document.getElementById("name").value);
    arr.push(document.getElementById("surname").value);
    
   console.log(arr);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <input placeholder="Name" type="text" id="name"/>
  <input placeholder="Surname" type="text" id="surname"/>
  <input type="button" onclick="remove()" value="Delete"/>
  <input type="button" onclick="addTo()" value="Add"/>
  </body>
</html>

【问题讨论】：

标签： javascript

【解决方案1】：

此代码具有删除功能并检查现有项目：

function remove() {
var obj={
    'index': document.getElementById("index").value
    };
    for(var i = arr.length - 1; i >= 0; i--) {
        if(arr[i]['index']===obj['index']) {
           arr.splice(i, 1);
        }
    }
    console.log(arr);
}
function addTo() {
var obj={
    'index': document.getElementById("index").value,
    'name': document.getElementById("name").value,
    'surname': document.getElementById("surname").value
    };
   
   if (!arr.some(e=>e['index']==obj['index'])) 
       // add new
       arr.push(obj);
   else
       // replace existing
       arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index']==obj['index'])[0][0]] = obj
   console.log(arr);
}


var arr = [];

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<label for="index">Index:</label>
  <select id="index" name="index">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <input placeholder="Name" type="text" id="name"/>
  <input placeholder="Surname" type="text" id="surname"/>
  <input type="button" onclick="remove()" value="Delete"/>
  <input type="button" onclick="addTo()" value="Add"/>
  </body>
</html>

【讨论】：

谢谢，但是在搜索解决方案时，当我在站点中以表格格式显示一个数组，然后我可以检查一个对象并删除他。

【解决方案2】：

您首先必须创建一个对象并在其中存储值，然后将该对象推入数组中

var arr = [];

  
 
function addTo() {
var obj=
    {'index':document.getElementById("index").value,
    'name':document.getElementById("name").value,
    'surname':document.getElementById("surname").value}
    arr.push(obj)
    
   console.log(arr);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <input placeholder="Name" type="text" id="name"/>
  <input placeholder="Surname" type="text" id="surname"/>
  <input type="button" onclick="remove()" value="Delete"/>
  <input type="button" onclick="addTo()" value="Add"/>
  </body>
</html>

【讨论】：

【解决方案3】：

您可以构建一个具有所需属性的对象并将该对象推送到数组中。

结果是一个对象数组，在此状态下不是JSON 字符串，因为 JSON 是数据的文本表示法。

function addTo() {
    arr.push({
        id: document.getElementById("index").value,
        name: document.getElementById("name").value,
        surname: document.getElementById("surname").value
    });
    console.log(arr);
}
var arr = [];

<select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input placeholder="Name" type="text" id="name"/>
<input placeholder="Surname" type="text" id="surname"/>
<input type="button" onclick="remove()" value="Delete"/>
<input type="button" onclick="addTo()" value="Add"/>

【讨论】：

谢谢。你对这样写的数组有什么想法，将其显示在页面上并选择对象等 index:2 并使用按钮将其删除？
您可以将数据呈现在一个表格中，并为其提供两个用于编辑或删除的按钮。
是的，我知道，但我不知道怎么做。
也许你看看这个问题：stackoverflow.com/questions/15164655/…
你能帮我把它改成数据的文本符号吗，因为我听不懂这个问题。