Grid com JS e JSON - dados desordenados

[FabianoSouza 5]

Pessoal, há um bom tempo tento criar um grid em JS usando JSON.

Com a ajuda dos colegas criei este código.

Ainda tem coisas para ajustar. Mas primeiro quero fazer funcionar.

 

Vejam. Deveria sair o nome do treinamento na coluna Treinamento e as datas na outra coluna, e sem duplicar linhas (são apenas 5 registros no BD)

 

 

Meu JSON (está validado no http://json.parser.online.fr/)

[[{"header":"Treinamento","data_inicio":"Data de in\u00EDcio"}],[{"titulo":"Aplica\u00E7\u00E3o de assessment para gestores","datainicio":"04\/04\/2014"},{"titulo":"Aplica\u00E7\u00E3o de pesquisa de clima 2014","datainicio":"10\/06\/2014"},{"titulo":"Campanha motivacional para equipe de vendas","datainicio":"01\/05\/2014"},{"titulo":"Palestra sobre gest\u00E3o por compet\u00EAncias","datainicio":"26\/04\/2014"},{"titulo":"Palestra sobre qualidade de vida","datainicio":"28\/04\/2014"},{"titulo":"Palestra sobre seguran\u00E7a da informa\u00E7\u00E3o","datainicio":"22\/10\/2014"},{"titulo":"Promover workshop sobre sustentabilidade","datainicio":"01\/01\/1900"},{"titulo":"Treinamento pr\u00E1tico na linha de produ\u00E7\u00E3o","datainicio":"29\/04\/2014"},{"titulo":"Treinamento Siebel CRM - m\u00F3dulo callcenter","datainicio":"29\/04\/2014"},{"titulo":"Treinamento sobre administra\u00E7\u00E3o do tempo","datainicio":"03\/06\/2014"}]]

O script

function listaForecast()
{

Aqui vem o AJAX...
...
if (obj_itens.readyState==4){ 

var string_json = eval(obj_itens.responseText);
var arrayHeader = string_json[0] // Objeto apenas com o nome das colunas do cabeçalho
var arrayDados = string_json[1]  // Objeto apenas com os dados

//*******************************************************************
//Array com o nome das colunas
var arrayTempHeader = new Array();

for (var i = 0; i < arrayHeader.length; i++) {
    var objeto = arrayHeader[i];
    for (var propriedade in objeto) {
		arrayTempHeader.push((objeto[propriedade]))
    }
}
  var colunas = arrayTempHeader;


//Array com o valores para preencher as células (ou TH)
var arrayTempCelulas = new Array();
for (var j = 0; j < arrayDados.length; j++) {
    var objeto = arrayDados[j];
    for (var propriedade in objeto) {
		arrayTempCelulas.push((objeto[propriedade]))
    }
}
  var celulas = arrayTempCelulas;
//*******************************************************************
//Começa a criar a tabela

var context = document.createElement('table');
  context.border = "1px";
  context.cellSpacing = "1px";
  context.width = "100%";
  context.className = 'table';

//Cria Header
var header = context.createTHead();
var row = header.insertRow();
for (var i = 0; i < colunas.length; i++) {
    var th = document.createElement('th');
    th.innerHTML = colunas[i];
    row.appendChild(th);
};

///Cria contexto para linhas
var body = context.appendChild(document.createElement('tbody'))

//Define quantidade de linhas
var linhas = arrayDados.length;

//Cria linhas
for (var i = 0; i < linhas; i++) {

    var row;
    row = body.insertRow();


//Aqui está o problema!******************************************************
//Preciso que o loop crie as células (ou TD) na row que foi criada acima, 
//depois escreve na célula o valor do array chamado "celulas" (está no início do script)

for (var j = 0; j < colunas.length; j++) {
       row.insertCell().innerHTML = (celulas[i]);
}
};
            var container = document.getElementById ("datagridview");
            container.appendChild (context);
}
}
obj_itens.send(null);
}

Agradeço desde já pela ajuda.

[William Bruno 1501]

O seu json está complicado de iterar. Se você organizar diferente vai ficar mais simples. Veja:

 

{
    "headers": ["Treinamento","Data de in\u00EDcio"],
    "body": [
        {"titulo":"Aplica\u00E7\u00E3o de assessment para gestores","datainicio":"04\/04\/2014"},
        {... }
    ]
}

entendeu ? assim ficará muito mais simples.

[FabianoSouza 5]

http://forum.imasters.com.br/topic/529544-grid-com-js-e-json-dados-desordenados/

http://forum.imasters.com.br/topic/529544-grid-com-js-e-json-dados-desordenados/

O seu json está complicado de iterar. Se você organizar diferente vai ficar mais simples. Veja:

{
    "headers": ["Treinamento","Data de in\u00EDcio"],
    "body": [
        {"titulo":"Aplica\u00E7\u00E3o de assessment para gestores","datainicio":"04\/04\/2014"},
        {... }
    ]
}

entendeu ? assim ficará muito mais simples.

 

 

Putz... estou usando a biblioteca JSON for ASP para gerar o JSON... não sei se consigo colocar neste padrão...to tentando. Não conheço muito bem a biblioteca.Você conhece?

Quero ver se consigo criar tb cabeçalho pela pg server side...acho melhor para controlar.

[FabianoSouza 5]

Galera, uma força aí, por favor.

 

Dúvidas: headers e titulo (deste exemplo abaixo) são campos que crio junto com a serialização de dados (server side no meu caso) ou crio no JS e alimento com dados serializados?

{
    "headers": ["Treinamento","Data de in\u00EDcio"],
    "body": [
        {"titulo":"Aplica\u00E7\u00E3o de assessment para gestores","datainicio":"04\/04\/2014"},
        {... }
    ]
}