Create HTML table out of object array in Javascript

Question

I am calling a web Method from javascript. The web method returns an array of customers from the northwind database. The example I am working from is here: Calling Web Services with ASP.NET AJAX

I dont know how to write this javascript method: CreateCustomersTable

This would create the html table to display the data being returned. Any help would be appreciated.

My javascript

function GetCustomerByCountry() {
  var country = $get("txtCountry").value;
  AjaxWebService.GetCustomersByCountry(country, OnWSRequestComplete, OnWSRequestFailed);
}
function OnWSRequestComplete(results) {
    if (results != null) {
        CreateCustomersTable(results);
        //GetMap(results);
    }
}
function CreateCustomersTable(result) {
    alert(result);
if (document.all) //Filter for IE DOM since other browsers are limited
{
   // How do I do this?
    }
}
else { 
$get("divOutput").innerHTML = "RSS only available in IE5+"; }
}

My web Method

    [WebMethod]
    public Customer[] GetCustomersByCountry(string country) 
    {
        NorthwindDALTableAdapters.CustomersTableAdapter adap =
           new NorthwindDALTableAdapters.CustomersTableAdapter();
        NorthwindDAL.CustomersDataTable dt = adap.GetCustomersByCountry(country);

        if (dt.Rows.Count <= 0)
        {
            return null;
        }

        Customer[] customers = new Customer[dt.Rows.Count];
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            NorthwindDAL.CustomersRow row = (NorthwindDAL.CustomersRow)dt.Rows[i];
            customers[i] = new Customer();
            customers[i].CustomerId = row.CustomerID;
            customers[i].Name = row.ContactName;
        }
        return customers;
    }

Answer 1

You should pass the array as JSON or XML instead of just the toString() value of it (unless that offcourse is returns either JSON oR XML). Note that JSOn is better for javascript since it is a javascript native format.
Also the person who told you that browser other then IE can not do DOM manipulation should propably have done horrible things to him/her.

If your format is JSON you can just for-loop them and create the elements and print them. (once you figured out what format your service returns we can help you better.)

Answer 2

Something like this, assuming you have JSON returned in the "result" value. The "container" is a div with id of "container". I'm cloning nodes to save memory, but also if you wanted to assign some base classes to the "base" elements.

var table = document.createElement('table');
var baseRow = document.createElement('tr');
var baseCell = document.createElement('td');
var container = document.getElementById('container');

for(var i = 0; i < results.length; i++){
  //Create a new row
  var myRow = baseRow.cloneNode(false);

  //Create a new cell, you could loop this for multiple cells
  var myCell = baseCell.cloneNode(false);
  myCell.innerHTML = result.value;

  //Append new cell
  myRow.appendChild(myCell);

  //Append new row
  table.appendChild(myRow);
}

container.appendChild(table);

Answer 3

Try to look what is the result variable value in debug mode. If the structure seems the structure that i'm imagining, something like this could work:

function CreateCustomersTable(result) {
    var table = document.createElement('table');
    var str = '<table>'; 
    str += '<tr><th>Id</th><th>Name</th></tr>';
    for ( var i=0; i< result.length; i++){
        str += '<tr><td>' + result[i].CustomerId + '</td><td>' + result[i].Name + '</td></tr>';
    }
    str += '</table>';
    return str;    
}

And then You can do somethig like this:

var existingDiv = document.getElementById('Id of an existing Div');
existingDiv.innerHTML = CreateCustomersTable(result);

I wish this help you. Sorry for my English, i'm trying for learn it!