CODEWITHSUNDEEP
javascriptjqueryarraysattributes
zinc_saucier
zinc_saucier

Reputation: 3

Using jQuery .length to find number of objects

So I have a page whose content is created via JavaScript objects/prototypes and I'm trying to use jQuery .length to find the number of name attributes, and then have the result show up in a table.

Here's an example object/prototype -- there are 38 of these, so ideally the end code should return 38:

function Player (n, c, s, y, t) {
    this.name = n; 
    this.team = c;
    this.salary = s; 
    this.years = y;
    this.type = t;
}

var mwQB1 = new Player ("D. Brees", "NO", 31, 0, "FTE");

Here's the function that should calculate and post the result in id="teamStatsSize": 

 $("document").ready(function () {
    var mwCalcRoster = function () {
    var mwRosterSize = $("prototype[name]").length;
    var mwElementRoster = document.createElement("p");
    mwElementRoster.innerHTML = mwRosterSize; 
    document.getElementById("teamStatsSize").appendChild(mwElementRoster);
} 
mwCalcRoster(); });

The code works to the extent that it does post in the correct place, it's just posting a 0 instead of a 38.

Thanks for your help!!!

Upvotes: 0

Views: 1042

Answers (1)

xCNPx
xCNPx

Reputation: 605

There are a few issues with what you have currently. I can't see your html markup but I am assuming you want to get the number of players inside the teamStatSize and update it as you add new players with a count. 

$("prototype[name]").length

Not sure what you were going for here, but maybe counting the number of Player Prototypes? Which I don't think will work properly, but you are close. You could count the number of paragraph tags in the container if you wish.

I've tried to mock up and example for you. Make sure this function runs after you've referenced jQuery. Preferabily at the bottom of the page just before the close body, we don't need a .ready because all the DOM will be loaded.

Some HTML : 

<div id="teamStatsSize">    
  <div id="count">Total Number of Players: <span>0</span></div>
</div>

Define your Player Contructor.

function Player (n, c, s, y, t) {
  this.name = n; 
  this.team = c;
  this.salary = s; 
  this.years = y;
  this.type = t; 
}

Then we make a self invoking function that namespaces in your functions and logic. We pass in jQuery as $, which makes jQuery available inside the object.

(function($){
    var app = {
        init: function() {
            this.addPlayer("Steve S", "CAR", 31, 0, "FTE");
            this.addPlayer("TO", "??", 31, 0, "FTE");
            this.addPlayer("Mike Vick", "JETS", 31, 0, "FTE");
            this.addPlayer("Eli Manning", "NY", 31, 0, "FTE");
        },
        mwCalcRoster: function(){
            var updateRosterSize = app.mwRosterSize();
        },
        players: [],
        addPlayer: function(n, c, s, y, t) {
            var $container = $('#teamStatsSize');

            // Create the player, add to a player array. 
            var playername = new Player (n, c, s, y, t);

            // Push the new player to an array. 
            app.players.push(playername);

            $container.append('<p>Name: '+playername.name+', Salary: '+playername.salary+', Team: '+playername.team+', Years: '+playername.years+', Type: '+playername.type+'</p>');

            // Update the Player Count
            app.updateRosterSize();

        },
        mwRosterSize: function() {
            return this.players.length || 0;
        },
        updateRosterSize: function() {
            var size = this.mwRosterSize();
            $('#count span').html(size);
        }

    }
    // Expose "app" object to the window. 
    window.app = app;
}(jQuery));

Now we have the "app" object on the window and we can call it like so. Go ahead, if you head over to the console in devtools / firebug and type "app" you'll see our object. 

app.init(); // This will add the 4 players we create inside the init function. 

app.mwRosterSize(); // Returns 4, which is the length of the app.players array. 

app.addPlayer("New Guy", "NY", 31, 0, "FTE"); // Add new player.

There are literally hundreds of ways you can go about doing this. Hopefully this helped you.

Upvotes: 1

Related Questions