javascript - 如何使用纯 javascript 将输入值保存在 JSON 对象中,然后将其保存在数组中?

标签 javascript arrays object

我认为标题已经说明了一切。我需要将输入值保存在一个对象中,然后将该对象保存在一个数组中。

<html>
  <head>
    <title>Teste</title>
  </head>
  <script>
    function vai(){
      var pessoa = {
      nome = document.getElementById('nome').value,
      idade = document.getElementById('idade').value
    };
      var i = 0;
      var pessoas = [];
      pessoas[i] = pessoa{};
      i++;
    }

  </script>

  <body>
    <label>Digite seu nome aqui</label>
    <input type='text' id='nome' placeholder='aquii'>
    <label>Digite sua idade aqui</label>
    <input type='text' id='idade' placeholder='aquii'>
    <button onclick='vai()'>
      Teste aqui
    </button>

  </body>
</html>

最佳答案

您应该在全局环境中(函数外)声明数组。您在对象内部也有一些语法问题(应该是 : 而不是 =)。然后你可以简单地 push()每次单击按钮时将对象放入数组中。

试试下面的方法:

var pessoas = [];
function vai(){
  var pessoa = {
    nome: document.getElementById('nome').value,
    idade: document.getElementById('idade').value
  };
  pessoas.push(pessoa);
  console.log(pessoas);
}
<label>Digite seu nome aqui</label>
<input type='text' id='nome' placeholder='aquii'>
<label>Digite sua idade aqui</label>
<input type='text' id='idade' placeholder='aquii'>
<button onclick='vai()'>
  Teste aqui
</button>

您通过维护变量而不使用 push() 的方法几乎是正确的,除了变量声明范围之外。您必须将其声明为全局变量。您可以将对象分配到当前位置并在每个函数调用中递增:

var pessoas = [];
var i = 0;
function vai(){
  var pessoa = {
    nome: document.getElementById('nome').value,
    idade: document.getElementById('idade').value
  };
  pessoas[i] = pessoa;
  i++;
  console.log(pessoas);
}
<label>Digite seu nome aqui</label>
<input type='text' id='nome' placeholder='aquii'>
<label>Digite sua idade aqui</label>
<input type='text' id='idade' placeholder='aquii'>
<button onclick='vai()'>
  Teste aqui
</button>

请注意:您也可以简单地使用 length数组的属性作为当前索引,在这种情况下您确实需要维护变量:

var pessoas = [];
function vai(){
  var pessoa = {
    nome: document.getElementById('nome').value,
    idade: document.getElementById('idade').value
  };
  pessoas[pessoas.length] = pessoa;
  console.log(pessoas);
}
<label>Digite seu nome aqui</label>
<input type='text' id='nome' placeholder='aquii'>
<label>Digite sua idade aqui</label>
<input type='text' id='idade' placeholder='aquii'>
<button onclick='vai()'>
  Teste aqui
</button>

关于javascript - 如何使用纯 javascript 将输入值保存在 JSON 对象中,然后将其保存在数组中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56301562/

相关文章:

php - 排序 multidim 数组 : prioritize if column contains substring, 然后按第二列排序

javascript - Django JavaScript 翻译空目录(i18n/jsi18n)

javascript - While 循环和 setInterval()

已知所有边, Angular 和前两个点时查找三 Angular 形第三点的Javascript函数

javascript - 如何使用键将两个数组组合成一个对象

php - 数组按值划分/拆分

Javascript ES6 解构嵌套对象父级和子级分配变量

javascript - JS : Merge objects with identical title value into new array object

Java 多态性 : Accessing methods in super and subclasses

javascript - 导航栏元素不折叠