[Jagst3r15]

Hi, I am working on some beginner JS homework, but I have run into a few issues. I have a few files, one is a js data file called april.js, a css file, and table.js . I linked them all in the main html document, but my main issue is with my table.js file. I am not looking for the answer, just some help!

I am instructed to add a function named showTable() with no parameters that writes some HTML table code to the document (I have done this I believe). I then have to create a table row for each person listed in the lastName array, create a for loop looping through each entry, writing the HTML code

<tr>
	<td>date</td>
	<td class='amt'>amount</td>
	<td>firstName</td>
	<td>lastName</td>
	<td>street <br />
	city, state, zip
	</td>
</tr>

where date, amount, firstName, lastName, street, city, state, zip are the items from the date, amount, firstName, lastName, street, city, and zip arrays.

Here is my table.js I coded so far:

function showTable() {
   document.write("<table id='contributors'>")
   document.write("<thead>")
   document.write(" <tr>")
   document.write("<th>Date</th><th>Amount</th>")
   document.write("<th>First Name</th><th>Last Name</th>")
   document.write("<th>Address</th>")
   document.write(" </tr>")
   document.write(" </thead>")

   document.write(" <tbody>")

   var lastName= [date, amount, firstName, lastName, street, city, state, zip];

   document.write(" <tr>")
   for var i = 0; i < lastName.length; i++) {
      document.write("<td>" + lastName[i] + "</td>")
   }
   document.write(" </tr>")

}

and the april.js provided by the instructor:

firstName = new Array();
lastName = new Array();
street = new Array();
city = new Array();
state= new Array();
zip = new Array();
amount = new Array();
date = new Array()


firstName[0]="Nina";
lastName[0]="Largent";
street[0]="88 Regal Lane";
city[0]="Williamsburg";
state[0]="KY";
zip[0]="40769";
amount[0]=175;
date[0]="2015-04-18";


firstName[1]="Morris";
lastName[1]="Hawkins";
street[1]="404 Barrow Street";
city[1]="London";
state[1]="KY";
zip[1]="40742";
amount[1]=75;
date[1]="2015-04-18";


firstName[2]="Monica";
lastName[2]="Lang";
street[2]="743 Stawlings Drive";
city[2]="Danville";
state[2]="KY";
zip[2]="40423";
amount[2]=150;
date[2]="2015-04-16";


firstName[3]="William";
lastName[3]="McKnight";
street[3]="102 Maple Lane";
city[3]="Danville";
state[3]="KY";
zip[3]="40423";
amount[3]=150;
date[3]="2015-04-15";


firstName[4]="Latrina";
lastName[4]="Hults";
street[4]="750 Whitehall Road";
city[4]="London";
state[4]="KY";
zip[4]="40742";
amount[4]=280;
date[4]="2015-04-14";


firstName[5]="Danny";
lastName[5]="Shamblin";
street[5]="123 Smith Drive";
city[5]="Owensboro";
state[5]="KY";
zip[5]="42303";
amount[5]=80;
date[5]="2015-04-13";


firstName[6]="Tina";
lastName[6]="Ammons";
street[6]="888 Evans Way";
city[6]="Williamsburg";
state[6]="KY";
zip[6]="40769";
amount[6]=50;
date[6]="2015-04-13";


firstName[7]="Joanne";
lastName[7]="Fine";
street[7]="210 Bowling Terrace";
city[7]="Williamsburg";
state[7]="KY";
zip[7]="40769";
amount[7]=155;
date[7]="2015-04-11";


firstName[8]="Charlotte";
lastName[8]="Foulk";
street[8]="109 South Road";
city[8]="Danville";
state[8]="KY";
zip[8]="40423";
amount[8]=90;
date[8]="2015-04-10";


firstName[9]="Candice";
lastName[9]="Alfaro";
street[9]="108 Atwood Avenue";
city[9]="Owensboro";
state[9]="KY";
zip[9]="42303";
amount[9]=450;
date[9]="2015-04-08";


firstName[10]="Kristi";
lastName[10]="Laine";
street[10]="512 North Lane";
city[10]="Williamsburg";
state[10]="KY";
zip[10]="40769";
amount[10]=275;
date[10]="2015-04-08";


firstName[11]="Elisabeth";
lastName[11]="Carbone";
street[11]="381 Main Street";
city[11]="London";
state[11]="KY";
zip[11]="40742";
amount[11]=210;
date[11]="2015-04-07";


firstName[12]="James";
lastName[12]="Larsen";
street[12]="212 Rawlings Way";
city[12]="Jackson";
state[12]="KY";
zip[12]="41339";
amount[12]=175;
date[12]="2015-04-07";


firstName[13]="Ralph";
lastName[13]="Thornton";
street[13]="444 Smith Drive";
city[13]="Owensboro";
state[13]="KY";
zip[13]="42303";
amount[13]=50;
date[13]="2015-04-07";


firstName[14]="Robin";
lastName[14]="Witt";
street[14]="78 Norland Pines";
city[14]="London";
state[14]="KY";
zip[14]="40742";
amount[14]=175;
date[14]="2015-04-07";


firstName[15]="Alex";
lastName[15]="Ruiz";
street[15]="102 Sunset Road";
city[15]="Jackson";
state[15]="KY";
zip[15]="41339";
amount[15]=150;
date[15]="2015-04-06";


firstName[16]="Callie";
lastName[16]="Rudy";
street[16]="3 Sunset Road";
city[16]="Jackson";
state[16]="KY";
zip[16]="41339";
amount[16]=55;
date[16]="2015-04-06";


firstName[17]="Michael";
lastName[17]="Harrell";
street[17]="125 Sunset Road";
city[17]="Jackson";
state[17]="KY";
zip[17]="41339";
amount[17]=75;
date[17]="2015-04-06";


firstName[18]="Edgar";
lastName[18]="Morales";
street[18]="387 North Lane";
city[18]="Williamsburg";
state[18]="KY";
zip[18]="40769";
amount[18]=150;
date[18]="2015-04-05";


firstName[19]="Arlene";
lastName[19]="Lutz";
street[19]="7888 Clear View Drive";
city[19]="Danville";
state[19]="KY";
zip[19]="40423";
amount[19]=175;
date[19]="2015-04-05";


firstName[20]="Earl";
lastName[20]="Holmes";
street[20]="1001 Rawlings Way";
city[20]="Jackson";
state[20]="KY";
zip[20]="41339";
amount[20]=700;
date[20]="2015-04-04";


firstName[21]="Bernice";
lastName[21]="Drew";
street[21]="25 Main Street";
city[21]="London";
state[21]="KY";
zip[21]="40742";
amount[21]=190;
date[21]="2015-04-04";


firstName[22]="Patrick";
lastName[22]="Granier";
street[22]="100 Atwood Avenue";
city[22]="Owensboro";
state[22]="KY";
zip[22]="42303";
amount[22]=135;
date[22]="2015-04-03";


firstName[23]="Henry";
lastName[23]="Bailey";
street[23]="37 East Maple Street";
city[23]="Danville";
state[23]="KY";
zip[23]="40423";
amount[23]=85;
date[23]="2015-04-03";


firstName[24]="Ginny";
lastName[24]="Rainey";
street[24]="657 Dawson Lane";
city[24]="Danville";
state[24]="KY";
zip[24]="40423";
amount[24]=150;
date[24]="2015-04-03";


firstName[25]="Ginny";
lastName[25]="Rainey";
street[25]="657 Dawson Lane";
city[25]="Danville";
state[25]="KY";
zip[25]="40423";
amount[25]=55;
date[25]="2015-04-03";


firstName[26]="Basilia";
lastName[26]="Lu";
street[26]="851 Flad Court";
city[26]="Jackson";
state[26]="KY";
zip[26]="41339";
amount[26]=600;
date[26]="2015-04-02";


firstName[27]="Livia";
lastName[27]="McKinnon";
street[27]="557 Ivy Avenue";
city[27]="Jackson";
state[27]="KY";
zip[27]="41339";
amount[27]=150;
date[27]="2015-04-01";

I appreciate any guidance. Let me know if I explained it well enough...

- James

[Atli]

Hey.

OK, to first address the question itself. You've got a bunch of parallel arrays that you must iterate over and print data for each. The basic logic for something like that looks like this: (Assuming your arrays are named list1, list2 and list3.)

for (var i = 0; i < list1.length; ++i) {
    document.write(list1[i]);
    document.write(list2[i]);
    document.write(list3[i]);
}

This will print each item at the correct positions to the document. It doesn't have to be more complicated that this, but since you almost managed to do it in a slightly more dynamic way, let me show that logic as well.

var set = [list1, list2, list3];
for (var y = 0; y < set[0].length; ++y) {
    document.write("<tr>");
    for (var x = 0; x < set.length; ++x) {
        document.write("<td>" + set[x][y] + "</td>");
    }
    document.write("</tr>");
}

What this does is combine all three sources into a single "set" of sources. Now you've got a multidimensional array where the "set" contains all three sources and can loop over all of them without you having to specifically type out document.write commands for each. This saves you a some lines of code, and makes it easier to extend it if you need to add other sources. If you push another array onto the end of set the loop will print that one too without modification.


Now, with that said, there are two things I would advice for this situation. I'm not sure if this goes against what you are being taught at the moment, but I'll suggest it anyway.

First, avoid using document.write. It's an old way of manipulating the page, which in modern applications has been replaced by methods that manipulate the DOM after it has been initialized. As an example, this is what my last example would look like using this method instead:

window.onload = function() {
    var set = [list1, list2, list3];
    var tableHTML = "";
    for (var y = 0; y < set[0].length; ++y) {
        tableHTML += "<tr>";
        for (var x = 0; x < set.length; ++x) {
            tableHTML += "<td>" + set[x][y] + "</td>";
        }
        tableHTML += "</tr>";
    }
    document.getElementById("container").innerHTML = tableHTML;
}

There are two changes: First, because we only want this to execute once the page is ready, I put it into the "window.onload" event handler. This ensures the code only executes once the page is loaded. However this is not the best way to achieve that goal, only the simplest. A better way is to use actual event handling, using methods like element.addEventListener() with the "load" or "DOMContentLoaded" events. - The second change is how the HTML is constructed and added to the page. Instead of writing it to the page directly, I collect it into a string, and then once it's ready, I load a container element via the DOM and set the new HTML string as it's HTML content. The code above assumes there is an element in the page with an "id" attribute set to "container", and that you want the table to exist within it.

Second, the format of the data you are being asked to use is very odd for a Javascript application. Parallel arrays are rarely a good idea, especially when you have so many better options. You can, as I demonstrated before, use multidimensional arrays, like:

var data = [
    ["Anna", "Street Name 1", "588-5522"],
    ["John", "Street Name 2", "688-6622"]
];

Or even an array of Javascript objects. (This is a basic JSON data structure.)

var data = [
    {   
        name: "Anna",
        street: "Street Name 1",
        phone: "588-5522"
    },
    {   
        name: "John",
        street: "Street Name 2",
        phone: "688-6622"
    }
];

Both of these formats are far better, practically speaking, than parallel arrays.

[Jagst3r15]

Thanks for the detailed reply! I had a feeling document.write was an older way of doing things, but I was not sure - I guess my teacher knows that, but he doesn't want to confuse people by going too hardcore or something. I do HTML/CSS freelance work and always try to follow standards as best I can, so I'll keep your advice in mind for JS

One more issue though: I fixed the showTable function, and now to call it my instructions say to insert a script element that runs the showTable() function. This does not work and I see an error message in my Chrome Dev Tools, so something is wrong:

            <figure id="data_list">
            <script type="text/javascript">
               showTable();
            </script>

            </figure>

Any ideas?

[Atli]

I see nothing wrong in that snippet. What is the error? Could you show us the updated function?

[Jagst3r15]

Here it is:

function showTable() {
   document.write("<table id='contributors'>")
   document.write("<thead>")
   document.write(" <tr>")
   document.write("<th>Date</th><th>Amount</th>")
   document.write("<th>First Name</th><th>Last Name</th>")
   document.write("<th>Address</th>")
   document.write(" </tr>")
   document.write(" </thead>")

   document.write(" <tbody>")

   for var i = 0; i < lastName.length; i++) {
      document.write(" <tr>")
      document.write("<th>" + lastName[i] + "</th>")
      document.write("<th>" + amount[i] + "</th>")
      document.write("<th>" + firstName[i] + "</th>")
      document.write("<th>" + lastName[i] + "</th>")
      document.write("<th>" + street[i] + "</th>")
      document.write("<th>" + city[i] + "</th>")
      document.write("<th>" + state[i] + "</th>")
      document.write("<th>" + zip[i] + "</th>")
      document.write(" </tr>")
   }
   document.write(" </tbody>")
   document.write(" </table>")

}

[Atli]

Look at the for loop definition. The correct syntax is:

for (cond1; cond2; cond3) {
    // <Insert code>
}

Your loop is missing the opening parenthesis around the conditions.

[Jagst3r15]

Wow, that was stupid on my part....it works now though, so thank you. There is another part to this, but I want to try to do it on my own first. Thanks again