logo标签列表

在JavaScript中向数组中添加元素

javascript
3
我是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>

3个回答
1
你需要先创建一个对象并存储值，然后将该对象推入数组中。 

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>

1
你可以构建一个带有所需属性的对象，并将该对象推送到数组中。
结果是一个对象数组，但这并不是一个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"/>

谢谢。你有没有想过像这样写一个数组，将其显示在页面上，然后选择对象等于索引2并用按钮删除它？ - Despo
是的，我知道，但我不知道怎么做。 - Despo
你能帮我将这个转换为数据的文本表示吗？因为我无法理解这个问题。 - Despo
我也不理解你的评论。 - Nina Scholz
实际上我没有看到文件。请提出一个新问题，包括完整的问题描述和您已经拥有的内容。 - Nina Scholz
显示剩余5条评论
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>

谢谢，但是在寻找解决方案时，当我以表格格式在网站中显示数组，然后我可以检查一个对象并将其删除。 - Despo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接