Créer un tableau HTML en dehors d'un tableau d'objets en Javascript

Question

J'appelle une méthode Web de javascript. La méthode Web renvoie un tableau de clients à partir de la base de données Northwind. L'exemple que je travaille à partir est ici: Calling Web Services with ASP.NET AJAX

Je ne sais pas comment écrire cette méthode javascript: CreateCustomersTable

Cela créerait la table html pour afficher les données retournées. Toute aide serait appréciée.

Mon 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+"; } 
} 

Ma méthode web

[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

Si la structure semble la structure que je me fais, quelque chose comme cela pourrait fonctionner:

function CreateCustomersTable(result) { 
    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;  
} 

Et vous pouvez le faire somethig comme ceci:

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

Je souhaite que cela vous aide.

Answer 2

Vous devriez passer le tableau en JSON ou XML au lieu de simplement la valeur toString() de celui-ci (sauf si cela est biensur retourne soit JSON oR XML). Notez que JSOn est meilleur pour javascript puisqu'il s'agit d'un format natif javascript.
Aussi la personne qui vous a dit que le navigateur autre que IE ne peut pas faire la manipulation DOM aurait propablement fait des choses horribles pour lui/elle.

Si votre format est JSON, vous pouvez simplement les boucler et créer les éléments et les imprimer. (Une fois que vous avez déterminé quel format votre service rend, nous pouvons vous aider à mieux.)

Answer 3

Quelque chose comme ceci, en supposant que vous avez JSON retourné dans la valeur "résultat". Le "conteneur" est un div avec l'identifiant de "container". Je clone des nœuds pour économiser de la mémoire, mais aussi si vous voulez assigner des classes de base aux éléments "base". Essayez de regarder quelle est la valeur de la variable de résultat en mode débogage.

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);