How to save an input value in a JSON object using pure javascript and then save it in an array?

Question

I think that the title explains itself. I need to save the input values in a object and then save this object in a array.

<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>

Mamun · Accepted Answer · 2019-05-25 04:42:19Z

You should declare the array in the global environment (outside the function). You also have some syntax issue inside the object (should be : instead of =). Then you can simply push() the object into the array in each button click.

Try the following way:

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>

You approach without using the push() by maintaining a variable is almost correct except the variable declaration scope. You have to declare that as a global variable. You can assign the object into the current position and increment that in each function call:

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>

Please Note: You can also simply use the length property of the array as the current index in which case you do need to maintain the variable:

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>

@aquasp, you are most welcome, you can refer the second answer in the updated answer if you do not want to use push():)

Maheer Ali · Accepted Answer · 2019-05-25 04:01:29Z

2

You need to fix three things:

Use : inside Object literals {} instead of =
Declare the main array pessoas in the global scope so it don't get change on every click
Use push() to add the object at the end of array.

Below is the working snippet.

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>

answered May 25, 2019 at 4:01

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

2 Comments

aquasp Over a year ago

Thanks! I didin't know the push() function. But just one more question, what if I wanted to save without push? Would this be possible?

Maheer Ali Over a year ago

@aquasp You can use length of the array pessoas[pessoas.length] = pessoa

Collectives™ on Stack Overflow

How to save an input value in a JSON object using pure javascript and then save it in an array?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related