简体   繁体   English

树表html来自json

[英]Tree table html from json

I have a JSON format and I am using primeng and want to use it a tree table structure (Html file). 我有JSON格式,并且我正在使用primeng,并希望使用它为树表结构(HTML文件)。

JSON: JSON:

 {
      brinname: "Aamir",
      aantalPersonen: "122",
      signalenVestiging: [
        {
          vestiging: "Ranchi",
          aantalPersonen: "102",
          signalenCode: [
            {
            signaalCode: "4",
            aantalPersonen: "15"
           },
          {
            signaalCode: "5",
            aantalPersonen: "15"
          } ]
        }, {
          vestiging: "Bangalore",
          aantalPersonen: "82",
          signalenCode: [
            {
              signaalCode: "6",
              aantalPersonen: "15"
            },
            {
              signaalCode: "7",
              aantalPersonen: "15"
            } ]
        } ]

    },
    {
      brinname: "Abhinav",
      aantalPersonen: "122",
      signalenVestiging: [
        {
          vestiging: "Bangalore",
          aantalPersonen: "102",
          signalenCode: [ {
            signaalCode: "7",
            aantalPersonen: "15"
          }]
        } ]

Can someone explain to me how can I achieve the above request? 有人可以向我解释如何实现上述要求吗? I am getting a lot of confusion to create a tree table html structure. 创建树形表html结构使我很困惑。

Explain: You need to clone all element's property to node 's data property by Object.keys(element).forEach - exclude array type property ( signalenVestiging , signalenCode ). 说明:您需要通过Object.keys(element).forEach将所有元素的属性克隆到node的data属性Object.keys(element).forEach排除数组类型的属性( signalenVestigingsignalenCode )。 Then add elements in array type property to node 's children array. 然后将array type属性中的元素添加到node的children数组中。 (Sorry for my bad english) (对不起,我的英语不好)

You can use below code 您可以使用以下代码

this.jsonData.forEach(element => {
      let tmp: any = {
        data: {},
        children: []
      };
      Object.keys(element).forEach(prop => {
        if (prop != 'signalenVestiging') {
          tmp.data[prop] = element[prop];
        } else {
          element[prop].forEach(c1 => {
            let tmp1: any = {
              data: {},
              children: []
            };
            Object.keys(c1).forEach(prop1 => {
              if (prop1 != 'signalenCode') {
                tmp1.data[prop1] = c1[prop1];
              } else {
                c1[prop1].forEach(c2 => {
                  let clone = $.extend(true, {}, c2);
                  tmp1.children.push({ data: clone });
                });
              }
            });
            tmp.children.push(tmp1);
          });
        }
      });
      this.data.push(tmp);
    });

Demo here 在这里演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM