我是javascript新手。我在google和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>
答案 0 :(得分: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 :(得分: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 :(得分: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>