Динамическая таблица из JSON с использованием javascript

Я использую следующий json для разработки структуры таблицы. Но я не могу продолжать добавлять строки по столбцам.Динамическая таблица из JSON с использованием javascript

[ 
{ 
"authType": "BasicAuth", 
"phases": [ 
    { 
    "type": "Development", 
    "keys":[{ 
     "username": "developer" 
    },{ 
     "password": "password123" 
    }] 
    }, 
    { 
    "type": "Testing", 
    "keys":[{ 
     "username": "tester" 
    },{ 
     "password": "password123" 
    }] 
    } 
] 
}, 
{ 
"authType": "AccessToken", 
"phases": [ 
    { 
    "type": "Development", 
    "keys":[{ 
     "token": "9a0554259914a86fb9e7eb014e4e5d52" 
    },{ 
     "url": "/demo/developer" 
    }] 
    }, 
    { 
    "type": "Testing", 
    "keys":[{ 
     "token": "9a0554259914a86fb9e7eb014e4e5d52" 
    },{ 
     "url": "/demo/testing" 
    }] 
    } 
] 
}, 
{ 
"authType": "OAuth", 
"phases": [ 
    { 
    "type": "Development", 
    "keys":[{ 
     "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
    },{ 
     "customer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
    },{ 
     "url": "/demo/development" 
    }] 
    }, 
    { 
    "type": "Testing", 
    "keys":[{ 
     "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
    },{ 
     "customer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
    },{ 
     "url": "/demo/testing" 
    }] 
    } 
] 
} 
]

Я использую следующий скрипт для итерации по json.

var subTable = '<div class="subtable"><table data-clicked-parent-row="'+ clickedCell.row 
      +'" data-clicked-column="'+ clickedCell.column +'"><tr><th>Keys</th>'; 
    tableData.forEach(function(e){ 
     if(rowType == e.authType){ 
      var phases; 
      e.phases.forEach(function(t){ 
       subTable += '<th>'+ t.type +'</th>' 
      }) 
      return subTable + '</tr></table></div>'; 
     } 
    })

Дело в том, что я не могу добавить строки в таблицу во время итерации по объектам. Ниже приведена статическая версия таблицы. как я могу написать общую функцию, чтобы получить следующую структуру таблицы. Пожалуйста, дайте мне знать лучший способ написать итерацию.

источник

2015-11-12 Imesh Chandrasiri

Где данные из столбца 1 заселении, кажется, от всех фаз => ключи, customer_key и URL-адрес. Являются ли они жестко закодированными, поскольку метка отличается от ключа. –

Вы перебираете все строки, затем над каждым столбцом («этапы»), чтобы создавать только заголовки таблиц ... Таким образом, у вас будет 1 заголовок на фазу в строке! Кроме того, как вы планируете отображать несколько ключей в элементе из 'tableData'? На скриншоте вы складываете их на несколько строк, а 'url' имеет свою собственную строку, поэтому вы бы складывали несколько строк на элемент в' tableData'? – ghybs

var data = { 
 
    "Items": [ 
 
     { 
 
      "id": "A004" 
 
      , "name": "ACC LR2" 
 
      , "userId": ["1","2","3","4"] 
 
     }, { 
 
      "id": "0001" 
 
      , "name": "ABG IT" 
 
      , "userId": ["8","9","10","11"] 
 
     } 
 
    ] 
 
} 
 

 
function getUserId(obj){ 
 
    result = [] 
 
    obj.Items.forEach(function(item, i){ 
 
     result.push(item.userId); 
 
    }); 
 
    return result; 
 
} 
 

 
function getUserIdAll(obj){ 
 
    result = [] 
 
    obj.Items.forEach(function(item, i){ 
 
     result = result.concat(item.userId); 
 
    }); 
 
    return result; 
 
} 
 

 
console.log(getUserId(data)); 
 
console.log(getUserIdAll(data)); 
 

 
var data = [ 
 
    { 
 
    "authType": "BasicAuth", 
 
    "phases": [ 
 
     { 
 
     "type": "Development", 
 
     "keys": [ 
 
      { 
 
      "username": "developer" 
 
      }, 
 
      { 
 
      "password": "password123" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "type": "Testing", 
 
     "keys": [ 
 
      { 
 
      "username": "tester" 
 
      }, 
 
      { 
 
      "password": "password123" 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "authType": "AccessToken", 
 
    "phases": [ 
 
     { 
 
     "type": "Development", 
 
     "keys": [ 
 
      { 
 
      "token": "9a0554259914a86fb9e7eb014e4e5d52" 
 
      }, 
 
      { 
 
      "url": "/demo/developer" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "type": "Testing", 
 
     "keys": [ 
 
      { 
 
      "token": "9a0554259914a86fb9e7eb014e4e5d52" 
 
      }, 
 
      { 
 
      "url": "/demo/testing" 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "authType": "OAuth", 
 
    "phases": [ 
 
     { 
 
     "type": "Development", 
 
     "keys": [ 
 
      { 
 
      "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
 
      }, 
 
      { 
 
      "customer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
 
      }, 
 
      { 
 
      "url": "/demo/development" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "type": "Testing", 
 
     "keys": [ 
 
      { 
 
      "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
 
      }, 
 
      { 
 
      "customer_key": "9a0554259914a86fb9e7eb014e4e5d52" 
 
      }, 
 
      { 
 
      "url": "/demo/testing" 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    } 
 
]; 
 

 
function objGetKeyVal(obj){ 
 
    for (var key in obj) { 
 
     return [ key, obj[key] ]; 
 
    } 
 
} 
 

 
(function createTable(tableData){ 
 
    var table = '<table>'; 
 
    // tableHeader += '<caption>Caption</caption>'; 
 
    // Creating table header 
 

 
    // table += '<tr>'; 
 
    // table += '<th>Keys</th>'; 
 
    // table += '<th>Development</th>'; 
 
    // table += '<th>Testing</th>'; 
 
    // table += '</tr>'; 
 

 
    // Sub tables iterator 
 
    tableData.forEach(function(subTable, i){ 
 
     tableRows = [];  // Rows array for sub table 
 

 
     table += '<tr><th>Keys</th>'; // Table headers creating 
 

 
     subTable.phases.forEach(function(colData, icol){ 
 
      
 
      table += '<th>'+colData.type+'</th>'; // Creating table headers for each phases 
 

 
      colData.keys.forEach(function(key, irow){ // Converts structured data to array of rows arrays of columns 
 
       if(tableRows[irow] === undefined) { tableRows[irow] = []; } 
 
       rowData = objGetKeyVal(key); 
 
       tableRows[irow][0] = rowData[0]; 
 
       tableRows[irow][icol+1] = rowData[1]; 
 
      }); 
 

 
     }); 
 
     
 
     table += '</tr>';    // End table header cration 
 

 
     // Now we have usual table array - need only convert it to HTML 
 
     // table looks like: [ ['col1', 'col2', 'col3'], ['col1', 'col2', 'col3'] ] 
 
     table += '<tr><th colspan="3">'+subTable.authType+'</th></tr>'; 
 
     tableRows.forEach(function(row){ 
 
      table += '<tr>'; 
 
      row.forEach(function(str){ 
 
       table += '<td>'+str+'</td>'; 
 
      }); 
 
      table += '</tr>'; 
 
     }); 
 
     
 
    }); 
 

 
    table += '</table>'; 
 
    $('body').append(table); 
 
    
 
})(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

источник

2015-11-12 12:11:43 VoidVolker

Заголовки таблиц должны быть созданы из JSON. динамически –

Ahh, в моем сценарии они создаются не динамически. Хорошо, один момент, я исправлю это. – VoidVolker

Исправлено. Это то, что тебе надо? – VoidVolker

Используйте эту функцию для рендеринга таблицы с JSON. Наблюдать эту функцию работает с простым json. Для комплексного JSon необходимого адаптера эта функция

var tableData = [ 
 
    { 
 
     "Name": "Kevin", 
 
     "Adress": "Adress UHE, SC", 
 
    }, 
 
    { 
 
     "Name": "Jose", 
 
     "Adress": "Adress KUK, CC", 
 
    }, 
 
    { 
 
     "Name": "Kevin", 
 
     "Adress": "Adress CGH, JK", 
 
    } 
 
]; 
 

 
function compile(){ 
 
    var subTable = '', column = '', row = ''; 
 
    
 
    for(c in tableData[0]) 
 
     column += '<th>' + c + '</th>'; 
 
    
 
    for(item in tableData){ 
 
     row += '<tr>'; 
 
     for(c in tableData[0]) row += '<td>' + tableData[item][c] + '</td>'; 
 
     row += '</tr>'; 
 
    } 
 
    console.log(row) 
 
    return '<table border="solid 1px"><tr>' + column + '</tr>' + row + '</table>'; 
 
}; 
 
document.write(compile());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

источник

2015-11-12 11:21:31

Динамическая таблица из JSON с использованием javascript

ответ

Смежные вопросы