javascript JSON端点的可折叠树结构- webcomponent

f45qwnt8  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(103)

我试图做一个web组件，输出activityId和描述的所有活动和嵌套的孩子。我在这里添加了完整的JS代码：https://codepen.io/dennisperremans/pen/qBQRQwZ
我的JSON文件：http://jsonblob.com/1123161096512094208
这是我渲染活动树的部分：

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

代码呈现父级，但不呈现子级。子节点的输出为undefined（ID：undefined）
嵌套的子级可以达到4个级别。

JavaScript

1条答案

按热度按时间
u0sqgete

u0sqgete1#

正如评论中所指出的，由于某种原因，数据没有分配。
（edit：看起来端点超时了，所以检查它是否可用，或者使用另一个端点）
它在硬编码时工作（这里有几个）。
但是，您的切换器似乎不起作用：单击时，它显示子项，但隐藏父项。
通过在click处理程序中添加event.stopPropagation();来修复：

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>
赞(0）分享  回复(0）举报  2023-06-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com