Javascript help - table formatting

Epoch · 8 May 2014 at 07:15

I'm wanting to display numbers from a JSON array into a table.

I'm trying to get it to list 2 items then go to a new row but just can't get it to work. Can anyone offer any help? Here's what I have so far.

Code:

<html>
<head>
<title>Telephone List - Classic</title>
<script language="javascript" >

document.writeln("<h2>Telephone List - Classic</h2>");

var telephone = { "contact" : [ 
      { "Name"  : "Mark", "Number" : 700 },
      { "Name"  : "Luke", "Number" : 400 },
	  { "Name"  : "John", "Number" : 300 },
	  { "Name"  : "Matthew", "Number" : 600 }
   ],                          
}    

var i = 0
document.writeln("<table width='90%' border='1'>");
document.writeln("<tr><td><b>Name</b></td><td><b>Number</b></td><td><b>Name</b></td><td><b>Number</b></td></tr>");
for(i=0;i<telephone.contact.length;i++)
{	
   document.writeln("<tr><td>"+ telephone.contact[i].Name+"</td>");
   document.writeln("<td>"+ telephone.contact[i].Number+"</td>");
   document.writeln("<td>"+ telephone.contact[i].Name+"</td>");
   document.writeln("<td>"+ telephone.contact[i].Number+"</td>");
   document.writeln("</tr>");
}
</script>
</table>
</head>
<body>
</body>
</html>

Im wanting it formatted with a new line every 2 entries.

Code:

Name          Number          Name          Number
Mark          700               Luke            400
John           300              Matthew        600

Any help would be much appreciated.

Epoch · 8 May 2014 at 09:01

Thank you for your reply. Your solution worked perfectly, however when trying to apply to real data, I think I have jumped in at the deep end. I usually play around with PHP and this is my first time fiddling with JS properly.

Again I appreciate the help.

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Telephone list</title>
  
  <script type='text/javascript' src='jquery-1.11.1.js'></script>

  <link rel="stylesheet" type="text/css" href="style.css">


<script type='text/javascript'> 
$(window).load(function(){
var telephoneData = {
    "contact": [{
        "Name": "Mark",
        "Number": 700
    }, {
        "Name": "Luke",
        "Number": 400
    }, {
        "Name": "John",
        "Number": 300
    }, {
        "Name": "Matthew",
        "Number": 600
    }],
}

var $table = $('#contacts');
for (var i = 0; i < telephoneData.contact.length; i += 2) {
    var $tr = $('<tr />');
    $tr.append(createCells(i));    
    $tr.append(createCells(i + 1));
    $table.append($tr);
}

function createCells(index) {
    if (telephoneData.contact[index]) {
        var $tdName = $('<td />', { text: telephoneData.contact[index].Name });
        var $tdNumber = $('<td />', { text: telephoneData.contact[index].Number });
        return [$tdName, $tdNumber];
    }
}
});  

</script>


</head>
<body>
  <h2>Telephone List - Classic</h2>

<table border="1" id="contacts">
    <tr>
        <th>Name</th>
        <th>Number</th>
        <th>Name</th>
        <th>Number</th>
    </tr>
</table>
  
</body>


</html>

Epoch · 8 May 2014 at 10:02

Sorry, yes, it is working. I was using that as a stepping stone to a creating a full list with a set of data I already have, hoping I could learn and figure it out myself. It looked like once I had that first bit sorted, all I would have to do is tell it to load the other file instead of having the data in the page, and ask it to sort alphabetically (When I searched how it seemed fairly straight forward)

Basically a colleague had created a dynamic list which pulls data from a file, sorts it alphabetically and is searchable and filters in real time while you search. I was just wanting to take that data file and instead just display all the data in a table in the format from the script above.

I realised that I am in over my head with it and have decided maybe I shouldn't try with something like this first - I'll just make it manually I think.

Epoch · 8 May 2014 at 13:43

I think its JSON? I really don't know java :confused:

Code:

var contacts1 = [ { name: A, Dr   K',
  number: '42' },
{ name: 'POINT, Miss   R',
  number: '47' },
{ name: 'ANDERSON, Miss   C',
  number: '44' },
{ name: 'PROS, Miss   K',
  number: '74' },
{ name: 'SMITH, Mrs   D',
  number: '47' }, ];

I've just used find and replace in notepad, and copied to excel and just made a table that way. I just had people wanting a printable copy of our filterable list that was all it was for, I just thought it would have been easier to have a second page that made it self from the same data file that people could print for themselves.

It's ok we can just leave it here. Thank you for assisting.