Simple Array

JavaScript
1

Im new to JavaScript so take it steady, i have an array:

<script type=“text/javascript”>

var colOne [0] = new Array(“Copyright”, “Council - spending plans - consultation”, “Data protection”);
var colTwo [1] = new Array(“Digital Region”, “Freedom of information”, “Libraries - online information resources”);
var colThree [2] = new Array(“Our standards”, “Test”};

document.write(colOne[0]);

</script>

anyone can tell why it does not work?

2

try

 
var colOne = new Array("Copyright", "Council - spending plans - consultation", "Data protection");
var colTwo  = new Array("Digital Region", "Freedom of information", "Libraries - online information resources");
var colThree  = new Array("Our standards", "Test"};
3

thanks :slight_smile:

4

You’ve got a syntax error in there. Easily done.

var colThree = new Array(“Our standards”, “Test”};

Should be var colThree = new Array(“Our standards”, “Test”);

What you were doing did look a bit like a multi-dimensional array. So another alternative


// make an array
var row = new Array();

// then populate the row array with new arrays
row[0] = new Array("Copyright", "Council - spending plans - consultation", "Data protection");
row[1] = new Array("Digital Region", "Freedom of information", "Libraries - online information resources");
row[2] = new Array("Our standards", "Test");

document.write(row[0]); // "Copyright", "Council - spending plans - consultation", "Data protection"
5

how do i then get the next list to appear next to it, so it looks like it has a 3 column layout?

6

Here’s how to do it using CSS.
CSS Swag: Multi-Column Lists

From there it’s just a matter of using JavaScript if necessary to spoon-feed the appropriate info to the presentation.

7

unable to get it to output the way it does on the link you sent, if you can show me how to get it to output like you have from numbers one to ten it would greatly be appreciated.

8

There’s probably a more efficient way of doing this, my DOM scripting needs word. Should give you an idea though.

Worth having a good look at the link posted by PWM. In addition look up ‘Javascript DOM scripting’.

A few other googles ‘Javascript document object model’, ‘Javascript createElement’, ‘Javascript createTextNode’, ‘Javascript appendChild’, come to mind.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>List</title>
<style type="text/css">
/* position list chunks side by side */
div.wrapper
{
  float: left;
  width: 20em;
}

.wrapper ul {
  list-style: none;
}

/* clear float after lists */
br
{
  clear: left;
}

</style>
</head>
<body>
<div id = 'columns'>
  <div class="wrapper">
    <ul id = 'column1' ></ul>
  </div>

  <div class="wrapper">
    <ul id = 'column2'></ul>
  </div>

  <div class="wrapper">
    <ul id = 'column2'></ul>
  </div>
  <br />
</div>

<script type="text/javascript">
// make an array
var listEntries = [];

// then populate the col array with new arrays
listEntries[0] = ["Copyright", "Council - spending plans - consultation", "Data protection"];
listEntries[1] = ["Digital Region", "Freedom of information", "Libraries - online information resources"];
listEntries[2] = ["Our standards", "Test"];

// function to populate list
var populateList = function (cols) {
  
  // define all variables.
  var columns = document.getElementById('columns'), // div wrapper for all columns
      uList = columns.getElementsByTagName('ul'), // nodelist of unordered list elements
	  uListLen = uList.length, // number of columns (Unordered lists). To be used in loop.
	  colsLen = 0, // number of columns
	  col = 0, row = 0, // counters for our loops
	  lItem = null, // current list item
	  texNode = ""; // text to append to list item

  for (; col < uListLen; col += 1){
    colsLen = cols[col].length;

	for (row = 0; row < colsLen; row += 1){
	  lItem = document.createElement('LI'); // create a list item
	  texNode = document.createTextNode(cols[col][row]); // create a textnode from the listEntries array
	  lItem.appendChild(texNode); // append text node to list item  
	  uList[col].appendChild(lItem); // append to current unorderlist (column);	  
	}
  } 
};

populateList(listEntries);

</script>
</body>
</html>
9

Had to ammend this as the ‘colsLen’ variable was a bit confusing. Swapped for rowLen.

// make an array
var listEntries = [];

// then populate the col array with new arrays
listEntries[0] = ["Copyright", "Council - spending plans - consultation", "Data protection"];
listEntries[1] = ["Digital Region", "Freedom of information", "Libraries - online information resources"];
listEntries[2] = ["Our standards", "Test"];

// function to populate list
var populateList = function (cols) {
  
  // define all variables.
  var columns = document.getElementById('columns'), // div wrapper for all columns
      uList = columns.getElementsByTagName('ul'), // nodelist containing unordered list elements
	  uListLen = uList.length, // Number of columns (Unordered lists). To be used in loop.
	  rowLen = 0, // Number of rows. Using a default of zero for now.
	  col = 0, row = 0, // Counters for our loops. Again given a default value of zero.
	  lItem = null, // current list item.
	  texNode = ""; // text to append to list item.

  for (; col < uListLen; col += 1){
    rowLen = cols[col].length; // find number of rows in current listEntry and assign to rowLen

	for (row = 0; row < rowLen; row += 1){
	  lItem = document.createElement('LI'); // create a list item
	  texNode = document.createTextNode(cols[col][row]); // create a textnode from the listEntries array
	  lItem.appendChild(texNode); // append text node to list item  
	  uList[col].appendChild(lItem); // append to current unorderlist (column);	  
	}
  } 
};