amsik / liquor-tree

Tree component based on Vue.js
MIT License
397 stars 96 forks source link

Load own json object sturture fails #46

Closed nicky508 closed 5 years ago

nicky508 commented 5 years ago

I found the liqour Tree lib and looks like something I would like to user. I dynamically built a json structure but the tree does not want to load the structure. The following structure is printed in the console:

{
  "text": "http://data.resc.info/shape#PropertyObject",
  "state": {
    "expanded": true
  },
  "children": [
    {
      "text": "http://vocab.netage.nl/kro#hasMonument",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#monument",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasAHN",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#bouwlagen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#pandHoogte",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#gemiddelde_hoogte",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#maximale_hoogte",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasBuilding",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#bouwjaar",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#bag_oppvlk",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#status",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#functie",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasLRKP",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#naamHouder",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#lrkpid",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#lrkpType",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#kindplaatsen",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/identifier",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasAddress",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#straat",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#huisnummer",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#plaatsnaam",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#gemeentenaam",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasBRK",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#sectie",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#perceelnummer",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasRRGS",
      "children": [
        {
          "text": "http://vocab.netage.nl/rrgs#gasdruk_meet_en_regelstations",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#gasvulstations",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#vervoerseenheden_met_gevaarlijke_stoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#overige_onbrandbare_vaste_gevaarlijke_stoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#brandbare_vaste_stoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#gasflessendepots_groterdan_10000",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/identifier",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#vloeistoffen_die_zeer_giftige_gassen_kunnen_vormen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#stofexplosie_gevaarlijke_stoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#overige_gevaarlijke_vloeistoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#overige_gevaarlijke_gassen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#kew",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#zeer_licht_ontvlambare_vloeistoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#brandbare_vloeistoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#vaste_stoffen_die_zeer_giftige_gassen_kunnen_vormen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#defensie",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#zeer_gifitige_vloeistoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#ammoniak",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#naam",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#vervoer_en_opslag",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#vuurwerk",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#zeer_giftige_gassen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#giftige_vloeistoffen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#mijnbouw",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#indicatie_BEVI",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#zeer_giftige_vaste_stof",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#pgs15",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#oxiderende_gassen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#vaste_stoffen_die_giftige_stoffen_kunnen_vormen",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#rrgsid",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#propaan",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/rrgs#lpg",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasNHR",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#sbicode",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#organization",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#kvknummer",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#vestigingsnummer",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    },
    {
      "text": "http://vocab.netage.nl/kro#hasWOZ",
      "children": [
        {
          "text": "http://vocab.netage.nl/kro#waardeonder",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#waardeboven",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#gebrklasse",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#waardeklasse",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#bouwbest",
          "children": []
        },
        {
          "text": "http://vocab.netage.nl/kro#resource",
          "children": []
        },
        {
          "text": "http://purl.org/dc/terms/modified",
          "children": []
        }
      ]
    }
  ]
}

The only thing shown in on the page is a checkbox with no text and no child features. I have totally no clue why it does not work. The only thing which I found is if I let the generate method return "{text: "test"}", it does work. But when the complete structure is generated like:

var treeData = []; var test = {}; test.text = "test"; treeData.push(test);

it does not work. Compared with the standard working json tree, it is totally the same structure.

amsik commented 5 years ago

Hi! Could you please show the code you using in https://jsfiddle.net. The format you provided works for me (https://jsfiddle.net/amsik/x0dfze43/)

If you want to add nodes to the tree (dynamicly or after some time) you have to use API

nicky508 commented 5 years ago

I think I found the issue. To construct the structure I use function provided by another library. If I create a test outside the funtion: var treeData = []; var test = {}; test.text = "test"; treeData.push(test); It works. If I create the same test within the function it does not work, Although I am able to get print the data to the console after returning. The issue is not in the handling of the liquor tree or something.