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

时间:2019-05-25 03:56:40

标签: 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>

2 个答案:

答案 0 :(得分:3)

您应该在全局环境(函数外部)中声明数组。您还可能在对象内部遇到语法问题(应为:而不是=)。然后,您只需在每次单击按钮时将对象push() length放入数组中即可。

尝试以下方式:

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>

请注意:您还可以简单地将数组的Your previous Stack Overflow question: how can i draw gantt chart with date from database in java 属性用作当前的 index 确实需要维护变量:

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>

答案 1 :(得分:1)

您需要解决三件事:

  • 在对象文字:中使用{}代替=
  • 在全局范围内声明主数组pessoas,以免每次点击都不会改变
  • 使用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>