How to add data to javascript object at run time

Question

I tried to add data to js object at run time this way but getting error. Tell me where I made the mistake?

This line giving the problem Persons.push(new Person(id:id,name:name,salary:sal));

Here is my code:

$(document).ready(function () {
    $("#btnSave").click(function () {
        var id,name,salary;
        id=$("#txtID").val();
        name=$("#txtName").val();
        sal=$("#txtSal").val();
        Persons.push(new Person(id:id,name:name,salary:sal));
        return false;
    });

    $("#btnDelete").click(function () {
        alert('delete');
        return false;
    });
});

var Persons = [];
var Person = function (id, name, salary) {
    this.id = id;
    this.name = name;
    this.salary = salary;
};

This way i add edit and delete data in js array. full code

<html>
<head><title>

</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 197px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSave").click(function () {
                var id, name, salary;
                id = $("#txtID").val();
                name = $("#txtName").val();
                sal = $("#txtSal").val();
                var index = IndexOfArrayByKeyValue(Persons, "id", id);
                if (index == null) {
                    Persons.push(new Person(id, name, sal));
                }
                else {
                    Persons[index].id = id;
                    Persons[index].name = name;
                    Persons[index].salary = sal;
                }
                Show();
                return false;
            });

            $("#btnDelete").click(function () {
                var id, name, salary;
                id = $("#txtID").val();
                name = $("#txtName").val();
                sal = $("#txtSal").val();
                var index = IndexOfArrayByKeyValue(Persons, "id", id);
                if (index != null) {
                    Persons.splice(index, 1);
                }
                Show();
                return false;
            });
        });

        var Persons = [];
        var Person = function (id, name, salary) {
            this.id = id;
            this.name = name;
            this.salary = salary;
        };

        function Show() {
            var theTable = document.createElement('table');
            for (var i = 0, tr, td; i < Persons.length; i++) {
                tr = document.createElement('tr');
                td = document.createElement('td');
                td.appendChild(document.createTextNode(Persons[i].id + '\u00A0\u00A0\u00A0'));
                tr.appendChild(td);

                td = document.createElement('td');
                td.appendChild(document.createTextNode(Persons[i].name + '\u00A0\u00A0\u00A0'));
                tr.appendChild(td);

                td = document.createElement('td');
                td.appendChild(document.createTextNode(Persons[i].salary + '\u00A0\u00A0\u00A0'));
                tr.appendChild(td);

                theTable.appendChild(tr);
            }
            $("#Displaytable").html(theTable);
        }

        function findArrayByKeyValue(arraytosearch, key, valuetosearch) {
            var Person = [];
            for (var i = 0; i < arraytosearch.length; i++) {
                if (arraytosearch[i][key] == valuetosearch) {
                    Person = arraytosearch[i];
                }
            }
            return Person;
        }

        function IndexOfArrayByKeyValue(arraytosearch, key, valuetosearch) {
            for (var i = 0; i < arraytosearch.length; i++) {
                if (arraytosearch[i][key] == valuetosearch) {
                    return i;
                }
            }
            return null;
        }

    </script>
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">

    <div>

        <table class="style1">
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    ID</td>
                <td>
                    <input name="txtID" type="text" id="txtID" style="width:61px;" />
                </td>
            </tr>
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    Name</td>
                <td>
                    <input name="txtName" type="text" id="txtName" style="width:252px;" />
                </td>
            </tr>
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    Salary</td>
                <td>
                    <input name="txtSal" type="text" id="txtSal" />
                </td>
            </tr>
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    <input type="submit" name="btnSave" value="Save" id="btnSave" />
&nbsp;
                    <input type="submit" name="btnDelete" value="Delete" id="btnDelete" />
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    </div>
    </form>
    <br /><br /><br />
    <div id='Displaytable'></div>
</body>
</html>

Read up on basic JS concepts such as how to call a function with parameters. — user663031
– user663031, Commented Dec 25, 2015 at 17:51

The fourth bird · Accepted Answer · 2015-12-25 17:35:11Z

4

Maybe you should change this line:

Persons.push(new Person(id:id,name:name,salary:sal));

To this:

Persons.push(new Person(id, name, salary));

answered Dec 25, 2015 at 17:35

The fourth bird

165k16 gold badges61 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user663031 Over a year ago

I guess it should be new Person(id, name, sal).

Shyju · Accepted Answer · 2015-12-25 17:35:20Z

0

You do not need to pass the parameter/argument names. Just pass the values to your Person constructor.

id = $("#txtID").val();
name = $("#txtName").val();
sal = $("#txtSal").val();
Persons.push(new Person(id,name,sal));

answered Dec 25, 2015 at 17:35

Shyju

220k106 gold badges421 silver badges499 bronze badges

Collectives™ on Stack Overflow

How to add data to javascript object at run time

This way i add edit and delete data in js array. full code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This way i add edit and delete data in js array. full code

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related