Displaying array objects in a table

Question

The problem I am having is that when I add a new actor the info displays in different rows. Take a look at the onclick function.

I need to add a new actor and display it in the table just like the first two are displayed.

var actors, i;

var Info = [{
    firstName: "Jason",
    lastName: "Statham",
    birth: "July 26, 1967",
    gender: "Male",
    genre: "Action, Crime, Thriller"
}, {
    firstName: "Mark",
    lastName: "Wahlberg",
    birth: "June 5, 1971",
    gender: "Male",
    genre: "Action, Comedy, Drama"
}];

var displayActors = function(actors) {
    var str = "<table class='table'>";
    str += "<tr>";
    str += "<th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Gender</th><th>Genre</th>";
    str += "</tr>";
    for (i = 0; i < actors.length; i++) {
        str += "<tr>";
        str += "<td>" + actors[i].firstName + "</td>";
        str += "<td>" + actors[i].lastName + "</td>";
        str += "<td>" + actors[i].birth + "</td>";
        str += "<td>" + actors[i].gender + "</td>";
        str += "<td>" + actors[i].genre + "</td>";
        str += "</tr>";
    }
    str += "</table>";

    document.getElementById("actorGrid").innerHTML = str;
}
window.onload = function() {
    displayActors(Info);
}
var sub = document.getElementById("submit").onclick = function() {
    var fName = document.getElementById("fname").value;
    var lName = document.getElementById("lname").value;
    var dOb = document.getElementById("dob").value;

    var str = "";
    str += "<td>" + Info.push({
        firstName: fName
    }) + "</td>";
    str += "<td>" + Info.push({
        lastName: lName
    }) + "</td>";
    str += "<td>" + Info.push({
        birth: dOb
    }) + "</td>";
    //Info.push({firstName: fName}, {lastName: lName}, {birth: dOb});

    document.getElementById("actorGrid").innerHTML = str;

    displayActors(Info);

}

<label>First Name</label><br />
<input type="text" id="fname"/><br />
<label>Last Name</label><br />
<input type="text" id="lname"/><br />
<label>Date of Birth</label><br />
<input type="date" id="dob"/><br />
<form action="">
   <label>Gender:</label><br />
   Male<input type="radio" name="gender" value="Male" id="male"/>
   Female<input type="radio" name="gender" value="Female" id="female"/><br />
</form>
<form action="">
   <label>Genre:</label><br />
   <label>Action<input type="checkbox" id="action"/></label>
   <label>Adventure<input type="checkbox" id="adventure"/></label>
   <label>Thriller<input type="checkbox" id="thriller"/></label>
   <label>Drama<input type="checkbox" id="drama"/></label>
</form>
<br /><input type="button" id="submit" value="Add Actor" />
<hr>
<div id="actorGrid"></div>

Jed Fox · Accepted Answer · 2017-06-30 13:13:06Z

You didn't have any row made for the 3 <td> you were generating ( It should be 5 <td> even if you didn't need the last 2 <td>s' data).

I actually completed the table to include gender and genre as well:

Used createElement('tr') and appendChild() this is the reason why the itional data did not show up in the table. You generated s but there wasn't any <tr> to put them into.
Used insertCell() to populate the <tr> with the needed <td>s
Gathered all the form data as you did, except I did the following for the last two data fields:

3A. For gender I used:
```
  `document.querySelector('input[name="gender"]:checked').value;`
```
3B. For genre I used:
- .elements HTMLCollection to gather the form#genre (I added #genre and [name="genre"] to the form).
- Looped through the genre.items().checked
- Extracted the values of each genre.items().checked
- Made a string of the results.
Changed your event handling a bit using addEventListener(). Now the JavaScript Gods will look kindly on your code. :P

Below is a working example, one little flaw is that the last item in genre will have a comma , if it isn't 'Drama'. References provided at the very end of post.

SNIPPET

var actors, i;


var Info = [{
  firstName: "Jason",
  lastName: "Statham",
  birth: "July 26, 1967",
  gender: "Male",
  genre: "Action, Crime, Thriller"
}, {
  firstName: "Mark",
  lastName: "Wahlberg",
  birth: "June 5, 1971",
  gender: "Male",
  genre: "Action, Comedy, Drama"
}];

var displayActors = function(actors) {
  var str = "<table class='table'>";
  str += "<tr>";
  str += "<th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Gender</th><th>Genre</th>";
  str += "</tr>";
  for (i = 0; i < actors.length; i++) {
    str += "<tr>";
    str += "<td>" + actors[i].firstName + "</td>";
    str += "<td>" + actors[i].lastName + "</td>";
    str += "<td>" + actors[i].birth + "</td>";
    str += "<td>" + actors[i].gender + "</td>";
    str += "<td>" + actors[i].genre + "</td>";
    str += "</tr>";
  }
  str += "</table>";

  document.getElementById("actorGrid").innerHTML = str;
}
window.onload = function() {
  displayActors(Info);
}
document.getElementById("submit").addEventListener('click', function() {
  var table = document.querySelector('.table');
  var tRow = document.createElement('tr');
  table.appendChild(tRow);
  var FN = tRow.insertCell(0);
  var LN = tRow.insertCell(1);
  var DOB = tRow.insertCell(2);
  var SEX = tRow.insertCell(3);
  var GEN = tRow.insertCell(4);
  var fName = document.getElementById("fname").value;
  var lName = document.getElementById("lname").value;
  var dOb = document.getElementById("dob").value;
  var gender = document.querySelector('input[name="gender"]:checked').value;
  var genre = document.getElementById("genre").elements;
  var gens = "",
    i;
  for (i = 0; i < genre.length; i++) {
    var g = genre.item(i);
    if (g.checked) {
      var story = g.value;
      if (i === genre.length - 1) {
        gens += story;
      } else {
        gens += story + ", ";
      }
    } else {
      gens += '';
    }
  }


  FN.innerHTML = fName;
  LN.innerHTML = lName;
  DOB.innerHTML = dOb;
  SEX.innerHTML = gender;
  GEN.innerHTML = gens;



}, false);

<label>First Name</label>
<br />
<input type="text" id="fname" />
<br />

<label>Last Name</label>
<br />
<input type="text" id="lname" />
<br />

<label>Date of Birth</label>
<br />
<input type="date" id="dob" />
<br />

<form action="">
  <label>Gender:</label>
  <br />Male
  <input type="radio" name="gender" value="Male" id="male" />Female
  <input type="radio" name="gender" value="Female" id="female" />
  <br />
</form>

<form id="genre" name="genre" action="">
  <label>Genre:</label>
  <br />
  <label>Action
    <input type="checkbox" id="action" value="Action" />
  </label>
  <label>Adventure
    <input type="checkbox" id="adventure" value="Adventure" />
  </label>
  <label>Thriller
    <input type="checkbox" id="thriller" value="Thriller" />
  </label>
  <label>Drama
    <input type="checkbox" id="drama" value="Drama" />
  </label>
</form>
<br />
<input type="button" id="submit" value="Add Actor" />
<hr>
<div id="actorGrid"></div>

REFERENCES

Traversing an HTML table with JavaScript and DOM Interfaces

How to get the value of a form element : check box and radio button

addEventListener

i also need to add an update and delete buttons to each actor which i can do but im not sure i can figure out the function to update if you can help me with that i would really appreciate it
Sure, I have a little bit of time before I get back to work. How do you want to update? By the whole row or by cell? Or maybe search for the actor, then edit? Hmm...I think you should post a new follow up question. Just use what you got on this post and/or my answer.

Agu V · Accepted Answer · 2016-04-28 18:59:01Z

0

I believe there are some td's missing

try this:

var sub = document.getElementById("submit").onclick = function() {
    var fName = document.getElementById("fname").value;
    var lName = document.getElementById("lname").value;
    var dOb = document.getElementById("dob").value;

    var str = "";
    str += "<td>" + Info.push({firstName: fName}) + "</td>";
    str += "<td>" + Info.push({lastName: lName}) + "</td>";
    str += "<td>" + Info.push({birth: dOb}) + "</td>";
    str += "<td></td>";
    str += "<td></td>";
    //Info.push({firstName: fName}, {lastName: lName}, {birth: dOb});

    document.getElementById("actorGrid").innerHTML = str;

    displayActors(Info);

}

answered Apr 28, 2016 at 18:59

Agu V

2,3014 gold badges26 silver badges40 bronze badges

1 Comment

Angel Over a year ago

it still does the same thing

itsnothingg · Accepted Answer · 2016-04-28 18:59:32Z

0

Well..I guess you forgot to wrap td to tr.

try to change submit click listener as follows :

var sub = document.getElementById("submit").onclick = function() {
        var fName = document.getElementById("fname").value;
        var lName = document.getElementById("lname").value;
        var dOb = document.getElementById("dob").value;

        var str = "<tr>";
        str += "<td>" + Info.push({firstName: fName}) + "</td>";
        str += "<td>" + Info.push({lastName: lName}) + "</td>";
        str += "<td>" + Info.push({birth: dOb}) + "</td>";
        str += "</tr>";
        //Info.push({firstName: fName}, {lastName: lName}, {birth: dOb});

        document.getElementById("actorGrid").innerHTML = str;

        displayActors(Info);
    }

hope this helps.

and as @Agu V answered, you missed tds.

answered Apr 28, 2016 at 18:59

itsnothingg

981 silver badge5 bronze badges

1 Comment

Angel Over a year ago

i added the tr but still does the same thing

Collectives™ on Stack Overflow

Displaying array objects in a table

3 Answers 3

SNIPPET

REFERENCES

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

SNIPPET

REFERENCES

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related