Здравствуйте, я пытаюсь добавить таблицу для каждого узла, я решил воспользоваться преимуществом createNode
свойства плагина, похоже, он работает правильно на консоли, но он продолжал выдавать ошибку
orgchart.js:1461 Failed to creat node TypeError: Cannot read property '0' of undefined
at Object.createNode (customOrgchart.js:50)
at orgchart.js:1423
at new Promise (<anonymous>)
at OrgChart._createNode (orgchart.js:1339)
at OrgChart.buildHierarchy (orgchart.js:1442)
at orgchart.js:1537
at Array.forEach (<anonymous>)
at OrgChart.buildHierarchy (orgchart.js:1527)
at new OrgChart (orgchart.js:41)
at HTMLDocument.<anonymous> (customOrgchart.js:40)
javascript file (customOrgchart. js):
import OrgChart from '../js/orgchart.js';
document.addEventListener('DOMContentLoaded' , function () {
let datascource = {
'name': 'Lao Lao',
'title': 'general manager',
'Resp':[{"Description":'item1',"price":'10$',"warranty":"1y","parts":"available"},{"Description":'item2',"price":'15$',"warranty":"1y","parts":"available"},{"Description":'item3',"price":'18$',"warranty":"1y","parts":"available" }],// that's the only part i've added
'children': [
{ 'name': 'Bo Miao', 'title': 'department manager' },
{ 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'name': 'Pang Pang', 'title': 'engineer' },
{ 'name': 'Xiang Xiang', 'title': 'UE engineer' }
]
}
]
},
{ 'name': 'Yu Jie', 'title': 'department manager' },
{ 'name': 'Yu Li', 'title': 'department manager' },
{ 'name': 'Hong Miao', 'title': 'department manager' },
{ 'name': 'Yu Wei', 'title': 'department manager' },
{ 'name': 'Chun Miao', 'title': 'department manager' },
{ 'name': 'Yu Tie', 'title': 'department manager' }
]
},
orgchart = new OrgChart({
'chartContainer': '#chart-container',
'data' : datascource,
'nodeContent': 'title',
'draggable': true,
'toggleSiblingsResp': false,
'createNode': function(node, data) {
/// what i've added
let secondMenuIcon = document.createElement('i'),
table = document.createElement('table');
console.log(Object.keys(data.Resp[0])); // data.Resp[0] looks correct in the console but also generats the error I've mentioned.
function generateTableHead(node, dataHr2) {
let thead = table.createTHead();
let row = thead.insertRow();
for (let key of dataHr2) {
let th = document.createElement("th");
let text = document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTable(node, data) {
for (let element of data) {
let row = table.insertRow();
for (let key in element) {
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
table.appendChild(secondMenuIcon);
table.appendChild(cell);
}
}
}
generateTableHead(node, Object.keys(data.Resp[0]));
generateTable(table, data.Resp);
console.log('table = ',table); // I can see the Table in the console
},// end of what I've added
'dropCriteria': function(draggedNode, dragZone, dropZone) {
if(draggedNode.querySelector(':scope > .content').textContent.includes('manager') &&
dropZone.querySelector(':scope > .content').textContent.includes('engineer')) {
return false;
}
return true;
}
});
});
все журналы выглядят правильно в консоли, в самой библиотеке есть что-то, чего я не делаю понимать.