Append Array by getting values from multiple input fields(textbox)

Question

I am using Aurelia Framework .I have four textbox fields and one button on my HTML view.

I created a service in which i declare JSON type Array.Now i want that when user fills the textbox then values should append in my array in objects form.

export class Std_service{
    rows:any;
    constructor(){
        this.rows = [{
            "name": "Aamir",
            "age": 20,
            "email": "aa@hotmail.com",
            "id" : 1
        }, {
            "name": "Adil",
            "age": 50,
            "email": "aaa@hotmail.com",
            "id" : 1
        }, {
            "name": "Usman",
            "age": 45,
            "email": "aaaaaa@hotmail.com",
            "id" : 1
        }];
    }


}

Answer 1

lets say you have variables that are bounded to your input fields. lets save a variable for the id (it's generated without the knowledge of the user)

you can add a function to your class that deals with filling the array and clearing the textbox.

export class Std_service{
    id: number = 0;
    name: string = "";
    age: string = "";
    email: string = "";

    rows:any = [];
    addRow()
    {
        this.rows.push({"name": this.name,
            "age": this.age,
            "email": this.email,
            "id" : this.id});

        this.name = "";
        this.age = "";
        this.email = "";
        this.id++;
    }
}

<input type="text" value.bind="name">
<input type="text" value.bind="age">
<input type="text" value.bind="email">
<button click.delegate="addRow()">add user to array</button>