Javascript push() function is not adding objects to an array

Question

I have a for-loop that cycles thru some html elements collected with jquery selectors and extracts some text or values from them. Each loop creates a new object. The object is simple, it is just text and a value. Console.log confirms that the object is created successfully each loop.

Outside the for-loop, I have a variable (kvObjs) that is initialized as an array. At the end of the for-loop, I push the new object into the array. But console.log confirms that the array stays empty.

This is part of a larger piece of code. This appears to be the part that isn't working. The specific function that isn't working is getKVs(), well, it works except for the part that tries to push the object on the array.

I promise you I looked thru all or almost all the "similar questions" and nothing clicked with me. I might have missed something in them, though. I feel like I'm overlooking something obvious.

I have tried to creating an array manually (var x = ["bob", "steve", "frank"]) and then setting another variable equal to that (var y = x) and that seems to work. I even created an array of objects, as in var x = [{"Key":"Bob","Value":10}, {"Key":"Steve","Value":5}], and I think that worked to. But my for-loop doesn't.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
    .Jobs {
        width: 300px;
        margin: 0 auto;
    }

    .Jobs li {
        display: grid;
        grid-template-columns: 1fr 50px;
        padding: 2px 5px 2px 7px;
        align-items: center;

    }

    .Jobs .value {
        text-align: right;
    }

    .Jobs p.value {
        padding-right: 7px;
    }

    .even {
        background-color: rgba(0,0,0,0.2);
    }
</style>

<div class="Jobs">
    <ul>
        <li class="kvp">
            <p class="key">Bob</p>
            <input class="value" type="number" value="3"/>
        </li>

        <li class="kvp even">
            <p class="key">Frank</p>
            <input class="value" type="number" value="2"/>
        </li>

        <li class="kvp">
            <p class="key">Tom</p>
            <input class="value" type="number" value="8"/>
        </li>

        <li class="kvp total even">
            <p class="key">Total</p>
            <p class="value">13</p>
        </li>
    </ul>
</div>

<script>

    class KV {
        constructor(key, value) {
            this.Key = key;
            this.Value = value;
        }
    }

    function getKVs(type) {
        type = "." + type + " .kvp";
        var elmts = $(type);
        var kvObjs = [];

        for (var i = 0; i < elmts.length; i++) {
            var elmt = $(elmts[i]);
            if(elmt.hasClass("total")) {
                // do nothing
            } else {
                var k = elmt.find(".key").text();
                var v = elmt.find("input").val();
                var kv = new KV(k, v);

                console.log(kv); // the kv object is successfully created

                kvObjs.push[kv];

                console.log(kvObjs.length); // but it is not being added to the array (length stays 0)
            }
        }


        return kvObjs;
    }

    var x = getKVs("Jobs");
    console.log(x); // so I'm transferring an empty array to x


</script>

I keep getting an empty array.

Answer 1

Problem in push() , replace kvObjs.push[kv] by kvObjs.push(kv); read syntax of push() => array.push(element1, ..., elementN);

    class KV {
        constructor(key, value) {
            this.Key = key;
            this.Value = value;
        }
    }

    function getKVs(type) {
        type = "." + type + " .kvp";
        var elmts = $(type);
        var kvObjs = [];

        for (var i = 0; i < elmts.length; i++) {
            var elmt = $(elmts[i]);
            if(elmt.hasClass("total")) {
                // do nothing
            } else {
                var k = elmt.find(".key").text();
                var v = elmt.find("input").val();
                var kv = new KV(k, v);

                console.log(kv); // the kv object is successfully created

                kvObjs.push(kv);

                console.log(kvObjs.length); // but it is not being added to the array (length stays 0)
            }
        }


        return kvObjs;
    }

    var x = getKVs("Jobs");
    console.log(x); // so I'm transferring an empty arr

 .Jobs {
        width: 300px;
        margin: 0 auto;
    }

    .Jobs li {
        display: grid;
        grid-template-columns: 1fr 50px;
        padding: 2px 5px 2px 7px;
        align-items: center;

    }

    .Jobs .value {
        text-align: right;
    }

    .Jobs p.value {
        padding-right: 7px;
    }

    .even {
        background-color: rgba(0,0,0,0.2);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Jobs">
    <ul>
        <li class="kvp">
            <p class="key">Bob</p>
            <input class="value" type="number" value="3"/>
        </li>

        <li class="kvp even">
            <p class="key">Frank</p>
            <input class="value" type="number" value="2"/>
        </li>

        <li class="kvp">
            <p class="key">Tom</p>
            <input class="value" type="number" value="8"/>
        </li>

        <li class="kvp total even">
            <p class="key">Total</p>
            <p class="value">13</p>
        </li>
    </ul>
</div>