Создать HTML-таблицу из массива объектов в Javascript - PullRequest
Новая
       35

Создать HTML-таблицу из массива объектов в Javascript

1 голос
/ 29 января 2009

Я вызываю веб-метод из javascript. Веб-метод возвращает массив клиентов из базы данных Northwind. Вот пример, из которого я работаю: Вызов веб-сервисов с ASP.NET AJAX

Я не знаю, как написать этот метод javascript: CreateCustomersTable

Это создаст HTML-таблицу для отображения возвращаемых данных. Любая помощь будет оценена.

Мой 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+"; }
}

Мой веб-метод 

    [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;
    }

Ответы [ 3 ]

4 голосов
/ 29 января 2009

Попробуйте посмотреть, каково значение переменной результата в режиме отладки. Если структура кажется структурой, которую я представляю, что-то вроде этого может сработать: 

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

И тогда Вы можете сделать что-то вроде этого: 

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

Я хочу, чтобы это помогло тебе.

2 голосов
/ 29 января 2009

Примерно так, при условии, что вы вернули JSON в значении "result". Контейнер - это div с идентификатором «container». Я клонирую узлы для экономии памяти, но также, если вы хотите назначить некоторые базовые классы элементам base. 

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);
1 голос
/ 29 января 2009

Вы должны передать массив как JSON или XML, а не просто его значение toString () (если только это исключение не возвращает JSON или XML). Обратите внимание, что JSOn лучше подходит для javascript, поскольку это собственный формат javascript.
Кроме того, человек, который сказал вам, что браузер, отличный от IE, не может делать DOM-манипуляции, вероятно, должен был сделать с ним ужасные вещи.

Если ваш формат JSON, вы можете просто зациклить их, создать элементы и распечатать их. (как только вы выясните, в каком формате возвращается ваш сервис, мы можем помочь вам лучше.)

...