Thevagabond Thevagabond - 4 months ago 12
HTML Question

Show JavaScript associative array in html table using HTML

I need to print out the results of a sort on an associative array in JavaScript in a HTML table not using PHP or those things.
The sorting works fine as I can see that in the console but it doesn't show the table. Here is the source as far as I have it now:



var array = [{
name: 'TK345',
year: 2011,
custom: 456,
colour: 'red'
}, {

name: 'ZJ456',
year: 2001,
custom: 96,
colour: 'black'
}, {
name: 'AW364',
year: 1985,
custom: 001,
colour: 'cyan'
}, {
name: 'RT112',
year: 2012,
custom: 33,
colour: 'green'
}, {
name: 'PO445',
year: 2012,
custom: 11,
colour: 'yellow'
}];

function sortarray(sorter) {

if (array.length < 1) {
return -1;
}

if (sorter == "name") {

var byName = array.slice(0);
var tableout = document.createElement('table');
var retval = null;
byName.sort(function(a, b) {

var x = a.name.toLowerCase();
var y = b.name.toLowerCase();
retval = x < y ? -1 : x > y ? 1 : 0;

tableout.setAttribute('border', '1');
tableout.setAttribute('width', '100%')
var row = tableout.insertRow(0);
for (j = 1; j <= 5; j++) {
row = tableout.insertRow(j - 1);
for (i = 1; i <= 4; i++)
var text = document.createTextNode(retval);
var cell = row.insertCell(i - 1);
cell.setAttribute('align', 'center')
cell.appendChild(text);
}
})
document.getElementById("demo").appendChild(tableout);
console.log(retval );

} else if (sorter == "year") {

var byDate = array.slice(0);
var tableout = document.createElement('table');
var retval = null;
byDate.sort(function(a, b) {

retval = a.year - b.year;

tableout.setAttribute('border', '1');
tableout.setAttribute('width', '100%')
var row = tableout.insertRow(0);
for (j = 1; j <= 5; j++) {
row = tableout.insertRow(j - 1);
for (i = 1; i <= 4; i++)
var text = document.createTextNode(retval );
var cell = row.insertCell(i - 1);
cell.setAttribute('align', 'center')
cell.appendChild(text);
}
})
document.getElementById("demo").appendChild(tableout);
console.log(retval );

} else {};

};

<!DOCTYPE html>
<html>

<body>
<button onclick="sortarray('name')">Sort by Name</button>
<button onclick="sortarray('year')">Sort by Year</button>
<p id="demo">test</p>
</body>
</html>





So it doesn't show me anything of that table on the page or in the console.

Any ideas?

Answer

Your code is broken in so many ways:

  • You have returns in wrong places
  • You do not need two different functions, you just need to have a different sort function
  • Doing something like for (var i = 1; i <= 4; i++) and then use i-1 is bad. Start counting from 0
  • You cannot access to Object using integer, you need to use its keys (see my inner for)
  • You do not need else {}
  • Be careful with indentation, it highlights logic errors as well.
  • You do not need to print the table inside the sort function

I removed some of your errors, this function works:

<!DOCTYPE html>
<html>
<body>
<button onclick="sortarray('name')">Sort by Name</button>
<button onclick="sortarray('year')">Sort by Year</button>
<p id="demo">test</p>

<script>
var array = [   
 {
    name: 'TK345',
    year: 2011,
    custom: 456,
    colour: 'red'
 },
 {

    name: 'ZJ456',
    year: 2001,
    custom: 96,
    colour: 'black'
},
{            
    name: 'AW364',
    year: 1985,
    custom: 001,
    colour: 'cyan'
},    
{
    name: 'RT112',
    year: 2012,
    custom: 33,
    colour: 'green'
},
{
    name: 'PO445',
    year: 2012,
    custom: 11,
    colour: 'yellow'
   }
];

function sortarray(sorter) {
  if (array.length < 1) {return -1;}

  var elems = array.slice(0);
  elems.sort(function(a, b) {
    if (sorter === 'name') {
      var x = a.name.toLowerCase();
      var y = b.name.toLowerCase();
      return x < y ? -1 : x > y ? 1 : 0;
    }

    return a.year - b.year;
  });
  
  var tableout = document.createElement('table');
  tableout.setAttribute('border','1');
  tableout.setAttribute('width','100%');
  
  var row = tableout.insertRow(0);
    
  for (var j=0; j<5; j++) {
    row = tableout.insertRow(j);
    var keys = Object.keys(elems[j]);
    for (var i=0; i < keys.length; i++) {
      var text = document.createTextNode(elems[j][keys[i]]);
      var cell = row.insertCell(i);
      cell.setAttribute('align','center');
      cell.appendChild(text);
    }
  }
  
  document.getElementById("demo").appendChild(tableout);
  console.log(elems);
}

</script>

</body>
</html>