pari pari - 3 years ago 119
Javascript Question

Best way to Display Multidimensional array values in table in javascript

I am having trouble displaying array values in table I have created below program. I have created instance of objects and arrays of those instance. I used for loop to display values in table but getting error:Can anyone help me to identify an issue ?

expected output:

https://i.stack.imgur.com/knetX.jpg

myoutput:

https://i.stack.imgur.com/UqDgC.png

<html>
<head>
<title></title>

<script type="text/javascript">

function Cruise(cruise_Date, cruise_Destination, cruise_URL, ship_Name, ship_Description, ship_url, the_price ) {
this.cruise_Date = cruise_Date;
this.cruise_Destination = cruise_Destination;
this.cruise_URL = cruise_URL;
this.ship_Name = ship_Name;
this.ship_Description = ship_Description;
this.ship_url = ship_url;
this.price = the_price
}



function DisplayList(cruise_Date, cruise_Destination, ship_Name, the_price) {

this.date = cruise_Date;
this.destination = cruise_Destination;
this.ship = ship_Name;
this.price = the_price;
this.display = displayClass;

}

function displayClass(){

document.write(this.date);
document.write(this.destination);
document.write(this.ship);
document.write(this.price);
}


var myCruise = new Cruise("13 Oct 2018",

"<a href ='#'> 3 Night Bahmas cruise </a>",

"Royal Caribbean",

'$' + 179);

var myCruise2 = new Cruise("13 Oct 2018",

"<a href = '#'> 4 Nights Baja Mexico Itinerary </a>",

"Carnival Inspiration",

'$' + 179);

var myCruise3 = new Cruise("13 Oct 2018",

"<a href = '#'>5 - Night Alaskan Cruise from Vancouver </a>",

"Disney Cruise Line",

'$' + 179);

instances = new Array(myCruise, myCruise2, myCruise3);
list = new Array("Departs", " Destination ", "Ship", "Price from");

</script>

</head>
<body>


<table border="", align="center", cellpadding="8" >
<thead>
<tr>
<script type="text/javascript">for (i = 0; i < 4; i++) {
document.write('<th>'+ list[i] +'</th>');
}
</script>
</tr>
</thead>
<tbody>
<tr>
<script type="text/javascript">
for (j = 0; j < 4; j++) {
document.write('<td>' + instances[j] + '</td>');
}

</script>
</tr>

</tbody>
</table>
</body>
</html>

Answer Source

There are a couple of issues I can spot right off the bat. First, your Cruise method expects 7 parameters but you're only passing it 4, and they don't match (for example, you have the price value being assigned to the name parameter):

function Cruise(cruise_Date, cruise_Destination, cruise_URL, ship_Name, ship_Description, ship_url, the_price ) {
[...]
var myCruise = new Cruise("13 Oct 2018", 
            "<a href ='#'> 3 Night Bahmas cruise </a>", 
            "Royal Caribbean", 
            '$' + 179);

Next, it's generally recommended not to use document.write. I won't go into why, there's plenty of information on this out there, and while it might work in this instance, it's generally not good practice if it can be avoided.

Since you're building the table contents in JavaScript anyway, have you considered storing your data as a JSON type object and using an ES6 template to display it? It requires adding the babel transpiler to the page, but that's worth doing anyway to be able to take advantage of modern JS/ES and it would let you do something much more readable/manageable like this (which also makes it easier if you ever want to push your data to an external JSON file):

HTML:

<html>
<head>
    <title></title>
</head>
<body>
  <div id="cruise"></div>
</body>
</html>

JavaScript:

const Cruises = [
  {
    date: "13 Oct 2018",
    destination: "3 Night Bahmas cruise",
    url: "http://www.example.com",
    name: "Royal Caribbean",
    price: "179"
  },
  {
    date: "14 Oct 2018",
    destination: "4 Nights Baja Mexico Itinerary",
    url: "http://www.example.com",
    name: "Carnival Inspiration",
    price: "279"
  },
  {
    date: "15 Oct 2018",
    destination: "5 - Night Alaskan Cruise from Vancouver",
    url: "http://www.example.com",
    name: "Disney Cruise Line",
    price: "379"
  }  
];

const h = `<table border="", align="center", cellpadding="8" >
  <thead>
    <tr>
      <td>Departs</td><td>Destination</td><td>Ship</td><td>Price from</td>
    </tr>
  </thead>
  <tbody>
    ${
          Cruises.map(cruise => 
        `<tr>
          <td>${cruise.date}</td>
          <td><a href="${cruise.url}">${cruise.destination}</a></td>
          <td><a href="${cruise.url}">${cruise.name}</a></td>
          <td>$${cruise.price}</td>
         </tr>`
            )
    }
  </tbody>
</table>`;
document.querySelector('#cruise').innerHTML = h;

Here's a Codepen of it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download