I'm trying to make a web-component that output the activityId and description of all the activities and nested children. I've added my full JS code over here: https://codepen.io/dennisperremans/pen/qBQRQwZ
And my JSON file: http://jsonblob.com/1123161096512094208
This is the part were I'm rendering the activity tree:
renderTree(data) {
let tree = '';
for (const item of data) {
tree += `<li>${item.description} (ID: ${item.activityId})`;
if (item.childActivityId && item.childActivityId.length > 0) {
const nestedChildren = this.renderTree(item.childActivityId);
tree += `<ul>${nestedChildren}</ul>`;
}
tree += '</li>';
}
return tree;
}
The code render the parents, but not the children. The output of the children is undefined (ID: undefined)
The nested children can go 4 levels deep.
As pointed out in the comments, the data is not assigned for some reason.
(edit: looks like the endpoint times out, so check that it's available, or use another endpoint)
It works when hardcoded (here's a few).
However, your toggler doesn't seem to work: when clicked, it shows children, but hides parent.
It's fixed with adding event.stopPropagation(); in the click handler:
item.addEventListener('click', (event) => {
event.stopPropagation();
class ActivityIndex extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.data = {
"result": [
{
"activityId": 39978,
"activityCode": "01",
"description": "Crop and animal production, hunting and related service activities",
"parentActivityId": null,
"parentActivityDescription": null,
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 39988,
"activityCode": "011",
"description": "Teelt van eenjarige gewassen",
"parentActivityId": "39978",
"parentActivityDescription": "Teelt van gewassen, veeteelt, jacht en diensten in verband met deze activiteiten",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40099,
"activityCode": "0111",
"description": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden",
"parentActivityId": "39988",
"parentActivityDescription": "Teelt van eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40424,
"activityCode": "01110",
"description": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40099",
"parentActivityDescription": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 41896,
"activityCode": "0111001",
"description": "Graanteelt (m.u.v. rijst) : tarwe, rogge, gerst, haver, maïs, enz. (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40424",
"parentActivityDescription": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41897,
"activityCode": "0111002",
"description": "Teelt van oliehoudende zaden en van peulvruchten : aardnoten, sojabonen, koolzaad, enz. (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40424",
"parentActivityDescription": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41898,
"activityCode": "0111003",
"description": "Teelt van drooggeoogste zaden van peulvruchten zoals erwten en bonen (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40424",
"parentActivityDescription": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41899,
"activityCode": "0111004",
"description": "Teelt van zaai- en plantgoed voor de akkerbouw (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40424",
"parentActivityDescription": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41900,
"activityCode": "0111005",
"description": "Teelt van overige akkerbouwgewassen, niet elders genoemd (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40424",
"parentActivityDescription": "Teelt van granen (m.u.v. rijst), peulgewassen en oliehoudende zaden (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
}
]
},
{
"activityId": 40100,
"activityCode": "0112",
"description": "Teelt van rijst",
"parentActivityId": "39988",
"parentActivityDescription": "Teelt van eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40425,
"activityCode": "01120",
"description": "Teelt van rijst (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40100",
"parentActivityDescription": "Teelt van rijst",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
},
{
"activityId": 40101,
"activityCode": "0113",
"description": "Teelt van groenten, meloenen en wortel- en knolgewassen",
"parentActivityId": "39988",
"parentActivityDescription": "Teelt van eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40426,
"activityCode": "01130",
"description": "Teelt van groenten, meloenen en wortel- en knolgewassen (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40101",
"parentActivityDescription": "Teelt van groenten, meloenen en wortel- en knolgewassen",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 41901,
"activityCode": "0113001",
"description": "Teelt van paddestoelen en truffels (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40426",
"parentActivityDescription": "Teelt van groenten, meloenen en wortel- en knolgewassen (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41902,
"activityCode": "0113002",
"description": "Teelt van zaai- en plantgoed voor de groenteteelt (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40426",
"parentActivityDescription": "Teelt van groenten, meloenen en wortel- en knolgewassen (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41903,
"activityCode": "0113011",
"description": "Aardappelteelt (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40426",
"parentActivityDescription": "Teelt van groenten, meloenen en wortel- en knolgewassen (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41904,
"activityCode": "0113012",
"description": "Teelt van wortels en knollen met een hoog zetmeel- of inulinegehalte (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40426",
"parentActivityDescription": "Teelt van groenten, meloenen en wortel- en knolgewassen (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
}
]
},
{
"activityId": 40102,
"activityCode": "0114",
"description": "Teelt van suikerriet",
"parentActivityId": "39988",
"parentActivityDescription": "Teelt van eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40427,
"activityCode": "01140",
"description": "Teelt van suikerriet (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40102",
"parentActivityDescription": "Teelt van suikerriet",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
},
{
"activityId": 40103,
"activityCode": "0115",
"description": "Teelt van tabak",
"parentActivityId": "39988",
"parentActivityDescription": "Teelt van eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40428,
"activityCode": "01150",
"description": "Teelt van tabak (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40103",
"parentActivityDescription": "Teelt van tabak",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
},
{
"activityId": 40104,
"activityCode": "0116",
"description": "Teelt van vezelgewassen",
"parentActivityId": "39988",
"parentActivityDescription": "Teelt van eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40429,
"activityCode": "01160",
"description": "Teelt van vezelgewassen (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40104",
"parentActivityDescription": "Teelt van vezelgewassen",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
},
{
"activityId": 40105,
"activityCode": "0119",
"description": "Teelt van andere eenjarige gewassen",
"parentActivityId": "39988",
"parentActivityDescription": "Teelt van eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": false,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 40430,
"activityCode": "01191",
"description": "Teelt van bloemen (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40105",
"parentActivityDescription": "Teelt van andere eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": true,
"childActivityId": [
{
"activityId": 41905,
"activityCode": "0119101",
"description": "Teelt van bloemen en snijbloemen (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40430",
"parentActivityDescription": "Teelt van bloemen (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41906,
"activityCode": "0119102",
"description": "Vervaardiging van gedroogde bloemen",
"parentActivityId": "40430",
"parentActivityDescription": "Teelt van bloemen (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": {
"prerequisite": true
},
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
},
{
"activityId": 41907,
"activityCode": "0119103",
"description": "Teelt van zaai- en plantgoed voor de bloementeelt (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40430",
"parentActivityDescription": "Teelt van bloemen (Mogelijk burgerlijke activiteit)",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
},
{
"activityId": 40431,
"activityCode": "01199",
"description": "Teelt van andere eenjarige gewassen, n.e.g. (Mogelijk burgerlijke activiteit)",
"parentActivityId": "40105",
"parentActivityDescription": "Teelt van andere eenjarige gewassen",
"customAcertaActivity": false,
"isTradeActivity": true,
"requirementActivity": [],
"startDate": "2008-01-01",
"endDate": null,
"matchesQuery": "",
"version": "Versie 2008",
"versionMapping": [],
"comment": "",
"hasChildren": false,
"childActivityId": []
}
]
}
]
},
] }],
"page": {
"pageSize": 20,
"totalElements": 88,
"currentPage": 0
}
}
}
connectedCallback() {
this.render();
}
render() {
if (!this.data) {
this.shadowRoot.innerHTML = `
<p>Loading data...</p>
`;
} else {
const tree = this.renderTree(this.data.result);
this.shadowRoot.innerHTML = `
<ul>${tree}</ul>
`;
this.addEventListeners();
}
}
renderTree(data) {
let tree = '';
for (const item of data) {
tree += `<li>${item.description} (ID: ${item.activityId})`;
if (item.childActivityId && item.childActivityId.length > 0) {
const nestedChildren = this.renderTree(item.childActivityId);
tree += `<ul>${nestedChildren}</ul>`;
}
tree += '</li>';
}
return tree;
}
addEventListeners() {
const items = this.shadowRoot.querySelectorAll('li');
for (const item of items) {
const children = item.querySelector('ul');
if (children) {
children.style.display = 'none';
item.addEventListener('click', (event) => {
event.stopPropagation();
children.style.display = children.style.display === 'none' ? 'block' : 'none';
});
}
}
}
}
customElements.define('activity-index', ActivityIndex);<activity-index></activity-index>