Массив, созданный из JS Object, показывает круглый объект при входе в консоль

Question

Я ищу, чтобы создать массив объектов, созданных из нескольких входов. Каждый раз, когда пользователь нажимает Add to Array Кнопка это должно добавить новый объект в массив. Однако, когда я записываю массив в консоль, он показывает циклическую ссылку.

Мой тестовый код, как показано ниже:

var selected = [];

var name = $(".name").val();
var id = $(".id").val();
var data = $(".data").val();

var data = {
  name : $(".name").val(),
  id : $(".id").val(),
  data: $(".data").val()
}
$("button").click(function(){    
    selected.push(data);
    console.log(selected);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="name" value='Some name' />
<input type="text" class="data" value='some data' />
<input type="text" class="id" value='12' />
<p id="demo"></p>
<button>Add to array</button>

Я хочу обычный массив всех значений, которые я добавил, для использования позже. Я не уверен, что круговая ссылка - это то, что я должен закончить.

Это неправильный способ поддерживать коллекцию объектов, которая будет опубликована на сервере позже?

Answer 1

Вам просто нужно объявить данные var в функции по щелчку, как в следующем примере:

var selected = [];

$("button").click(function() {
  var data = {
    name: $(".name").val(),
    id: $(".id").val(),
    data: $(".data").val()
  }
  selected.push(data);
  console.log(selected);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="name" value='Some name' />
<input type="text" class="data" value='some data' />
<input type="text" class="id" value='12' />
<p id="demo"></p>
<button>Add to array</button>