Trying to create simple table from array of objects with jQuery

Question

I'm trying to create a simple table with jQuery by looping through an array of objects but get this message in the console:

TypeError: 'undefined' is not an object (evaluating 'people[i].lastName')

It works if I define the specific object (i.e. John.lastName) but not using the array[i], am I doing something wrong?

var person = function(firstName, lastName) {
    this.firstName = firstName || "Anonymous";
    this.lastName = lastName || "Anonymous";
    };

    var John = new person("John", "Walter");
    var Bob = new person("Bob", "Stevens");
    var Gerry = new person("Gerry", "Cricket");
    var Frank = new person("Frank", "Bloom");

    var people = [John, Bob, Gerry, Frank];

    for (i = 0; i < people.length; i++) {

    $(document).ready(function() {
    $("body").append("<table><tr><td>" + people[i].lastName + "</td></tr></table>");
    });

    };

The given code works. jsfiddle.net/qYb66 What are you not telling us? Also not sure why you have $(document).ready(function() { inside of the foreach loop. — Popnoodles
– Popnoodles, Commented Jun 1, 2014 at 16:24

wshipley · Accepted Answer · 2014-06-01 17:53:34Z

1

You can't put a $(document).ready within a for loop. Put your function inside the document.ready and your code works fine. To Add a table before the for loop and the /table 
after the for loop to prevent making each row in the array a table.

     $(document).ready(function()
  {
var person = function(firstName, lastName) {
    this.firstName = firstName || "Anonymous";
    this.lastName = lastName || "Anonymous";
    };

    var John = new person("John", "Walter");
    var Bob = new person("Bob", "Stevens");
    var Gerry = new person("Gerry", "Cricket");
    var Frank = new person("Frank", "Bloom");

    var people = [John, Bob, Gerry, Frank];
        $("body").append("<table>");

    for (i = 0; i < people.length; i++) {
console.log(people[i]);

   $("table").append("<tr><td>" + people[i].lastName + "</td></tr>");

    };
    $("<table>").append("</table>");
    });

edited Jun 1, 2014 at 17:53

answered Jun 1, 2014 at 17:41

wshipley

563 bronze badges

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

2 Comments

Maurice Perry Over a year ago

It's still creating 4 tables instead of one though

wshipley Over a year ago

I updated the example to make only one table. Thanks!

Collectives™ on Stack Overflow

Trying to create simple table from array of objects with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related