Question 227955 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – problem with putting objects created with constrsuctor into an array

I’m doing a simple exercise with an object constructor. in this exercise, I create a form, and every time a user fills the form and clicks the show button, the data will send to an object constructor "Person" and every person’s data will be put into the created object and then every object will be put into "myperson" array and print the array in the console.
but the problem is, the console only shows one index and the other indexes are empty.

document.querySelector(".btn-danger").addEventListener("click",get_data);
let i = 0;
function get_data() { 
    let myperson = [];
    let first_name = document.querySelector(".f_name").value;
    let last_name = document.querySelector(".l_name").value;
    let age = document.querySelector(".age").value;
     myperson[i++] = new Person(first_name, last_name, age);
    console.log(myperson);
    
}

function Person(f_name, l_name, age) {
    this.f_name = f_name;
    this.l_name = l_name;
    this.age = age;
}
<body>

    <div class="container">
        <form action="" class="mt-5">
            <div class="form-group text-right">
                <label> firstname </label>
                <input type="text" class="form-control f_name" value="">
            </div>
            <div class="form-group text-right">
                <label> lastname  </label>
                <input type="text" class="form-control l_name" value="">
            </div>
            <div class="form-group text-right">
                <label> age </label>
                <input type="text" class="form-control age" value="">
            </div>
            <button type="button" class="btn btn-lg btn-danger"> show </button>
            
        </form>
    </div>

</body>

console

Tags:

5

Answers


  1. 0

    You should declare you array outside the get_data function, in general it should be somewhere globally declared. Now it is created every time get_data is called, hence you always have a new array containing only the last person obj.

    Login or Signup to reply.
  2. 0
    1. you have set let i = 0; so every time when user will click on show button it will override the existing one.

    instead of setting i=0 first get the count of array and then set i= count+1;

    1. you are initializing array every time let myperson = []; due to which older is getting removed from existing array instead you and create a global variable.
    Login or Signup to reply.
  3. 0

    myPerson should be a global variable, when put myPerson inside the method it will be initialized every time you call the method. Here’s the modified code:

    document.querySelector(".btn-danger").addEventListener("click",get_data);
const myperson = [];
function get_data() { 
    let first_name = document.querySelector(".f_name").value;
    let last_name = document.querySelector(".l_name").value;
    let age = document.querySelector(".age").value;
     myperson[myperson.length] = new Person(first_name, last_name, age);
    console.log(myperson);
    
}

function Person(f_name, l_name, age) {
    this.f_name = f_name;
    this.l_name = l_name;
    this.age = age;
}
    <body>

    <div class="container">
        <form action="" class="mt-5">
            <div class="form-group text-right">
                <label> firstname </label>
                <input type="text" class="form-control f_name" value="">
            </div>
            <div class="form-group text-right">
                <label> lastname  </label>
                <input type="text" class="form-control l_name" value="">
            </div>
            <div class="form-group text-right">
                <label> age </label>
                <input type="text" class="form-control age" value="">
            </div>
            <button type="button" class="btn btn-lg btn-danger"> show </button>
            
        </form>
    </div>

</body>
    Login or Signup to reply.
  4. 0

    To fix this, you need to declare the myperson array outside the get_data function so that it maintains the previously added person objects. Here’s the modified code:

        let myperson = [];

document.querySelector(".btn-danger").addEventListener("click",get_data);
let i = 0;
function get_data() { 
    let first_name = document.querySelector(".f_name").value;
    let last_name = document.querySelector(".l_name").value;
    let age = document.querySelector(".age").value;
     myperson[i++] = new Person(first_name, last_name, age);
    console.log(myperson);
    
}

function Person(f_name, l_name, age) {
    this.f_name = f_name;
    this.l_name = l_name;
    this.age = age;
}
    document.querySelector(".btn-danger").addEventListener("click",get_data);
let i = 0;
function get_data() { 
    let myperson = [];
    let first_name = document.querySelector(".f_name").value;
    let last_name = document.querySelector(".l_name").value;
    let age = document.querySelector(".age").value;
     myperson[i++] = new Person(first_name, last_name, age);
    console.log(myperson);
    
}

function Person(f_name, l_name, age) {
    this.f_name = f_name;
    this.l_name = l_name;
    this.age = age;
}
    Login or Signup to reply.
  5. 0

    You are deleting the array each time you click the button.
    moved the myperson outside the function to keep it.

    document.querySelector(".btn-danger").addEventListener("click",get_data);

var myperson = [];
function get_data() { 
    let first_name = document.querySelector(".f_name").value;
    let last_name = document.querySelector(".l_name").value;
    let age = document.querySelector(".age").value;
    let person = new Person(first_name, last_name, age);
    myperson.push(person);
    console.log(myperson);
    
}

function Person(f_name, l_name, age) {
    this.f_name = f_name;
    this.l_name = l_name;
    this.age = age;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search