Trouble creating correct array for tree.

[mebcsParticipant]

I am reading a very large xml file and creating an array to show in a tree.
I don’t have control over the xml format or I would just make it compatible.

<?xml version="1.0" encoding="utf-8"?>
<inventory xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <segment networkid="RES" branchid="04TH_E_AV" sectionid="10" pid="RES::04TH_E_AV::10" use="ROADWAY" usecategory="ROADWAY/PARKING" surface="AAC" surfacecategory="FLEXIBLE" length="820.43" width="20.00" area="16408.58" slablength="0.00" slabwidth="0.00" slabs="0" inspDate="7/1/2012" inspSamples="9" PCI="38" IRI="390.54" RN="1.67" />
  <segment networkid="RES" branchid="04TH_E_AV" sectionid="5" pid="RES::04TH_E_AV::5" use="ROADWAY" usecategory="ROADWAY/PARKING" surface="AAC" surfacecategory="FLEXIBLE" length="653.68" width="20.00" area="13073.53" slablength="0.00" slabwidth="0.00" slabs="0" inspDate="7/1/2012" inspSamples="7" PCI="43" IRI="472.69" RN="1.62" />
  <segment networkid="RES" branchid="05TH_E_AV" sectionid="5" pid="RES::05TH_E_AV::5" use="ROADWAY" usecategory="ROADWAY/PARKING" surface="AC" surfacecategory="FLEXIBLE" length="745.84" width="20.00" area="14916.80" slablength="0.00" slabwidth="0.00" slabs="0" inspDate="7/1/2012" inspSamples="8" PCI="1" IRI="383" RN="1.49" />
...
...
...

When I call loadinventorydata it gets the xml doc and passes it to makeInv that then tries to create an array compatable with the tree source.
The data is very simple, primary node “pid”, child nodes “several”.

     function loadinventorydata() {
       // Load the inventory XML file
       document.getElementById('load-status').innerHTML = 'Inventory Loading....';
       var myinvxml = readxml(xmlinvsource);
       //makeTable(myinvxml,xmlinvsource,"debug-window");
       invUnits = makeUnits(myinvxml);
       invData = makeInv(myinvxml);
       document.getElementById('load-status').innerHTML = 'Inventory Loaded : ' + invData.length + ' found.';

       $('#invtree').jqxTree({ source: invData , height: '300px', width: '100%'});
     }

    function makeInv(xmldoc) {
        var output = [];
        var segments = xmldoc.getElementsByTagName("segment");
        for(var i = 0; i < segments.length; i++) {
            var e = segments[i];
            var pid = e.getAttribute("pid");
            var pidnetworkid = e.getAttribute("networkid");
            var pidbranchid = e.getAttribute("branchid");
            var pidsectionid = e.getAttribute("sectionid");
            var piduse = e.getAttribute("use");
            var pidusec = e.getAttribute("usecategory");
            var pidsurface = e.getAttribute("surface");
            var pidsurfacec = e.getAttribute("surfacecategory");
            var pidDate = e.getAttribute("inspDate");
            var pidPCI = e.getAttribute("PCI");
            var pidIRI = e.getAttribute("IRI");
            var pidRN =e.getAttribute("RN");
            
            var inv = [
                       {label    : pid, 
                        value    : pid, 
                        expanded : false,
                        items    : [
                                     {label : "NetworkID"        , value : pidnetworkid},
                                     {label : "BranchID"         , value : pidbranchid},
                                     {label : "SectionID"        , value : pidsectionid},
                                     {label : "Branch Use"       , value : piduse},
                                     {label : "Use Category"     , value : pidusec},
                                     {label : "Surface"          , value : pidsurface},
                                     {label : "Surface Category" , value : pidsurfacec},
                                     {label : "Inspection Date"  , value : pidDate},
                                     {label : "PCI"              , value : pidPCI},
                                     {label : "IRI"              , value : pidIRI},
                                     {label : "RN"               , value : pidRN}
                                    ]
                       }          
                      ];
            output[i] = inv;
        }
        return output;
    }

[DimitarParticipant]

Hello mebcs,

Is the tree not loaded correctly? Could you, please, provide us with the resulting array so that we may determine if there is an issue with it?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mebcsParticipant]

How do i dump the resulting array?

[mebcsParticipant]

I dumped the array to the colsole and expanded the last element.
The tree only shows the notes as ‘Item’ with no sub nodes.

[Array[1], Array[1], Array[1], Array[1], Array[1], Array[1], Array[1], Array[1]]
0: Array[1]
1: Array[1]
2: Array[1]
3: Array[1]
4: Array[1]
5: Array[1]
6: Array[1]
7: Array[1]
0: Object
expanded: false
items: Array[11]
0: Object
label: "NetworkID"
value: "RES"
__proto__: Object
1: Object
label: "BranchID"
value: "09TH_ST"
__proto__: Object
2: Object
label: "SectionID"
value: "100"
__proto__: Object
3: Object
label: "Branch Use"
value: "ROADWAY"
__proto__: Object
4: Object
label: "Use Category"
value: "ROADWAY/PARKING"
__proto__: Object
5: Object
label: "Surface"
value: "AC"
__proto__: Object
6: Object
label: "Surface Category"
value: "FLEXIBLE"
__proto__: Object
7: Object
label: "Inspection Date"
value: "7/1/2012"
__proto__: Object
8: Object
label: "PCI"
value: "19"
__proto__: Object
9: Object
label: "IRI"
value: "196.5"
__proto__: Object
10: Object
label: "RN"
value: "1.65"
__proto__: Object
length: 11
__proto__: Array[0]
label: "RES::09TH_ST::100"
value: "RES::09TH_ST::100"
__proto__: Object
length: 1
__proto__: Array[0]
length: 8
__proto__: Array[0]

[DimitarParticipant]

Hi mebcs,

You can learn how to alert your array here: http://stackoverflow.com/questions/3006644/how-can-i-view-array-structure-in-javascript-with-alert. Please provide us with the result.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mebcsParticipant]

Here is a link to the xml file:

This is the code I am now using and can not get tree to display anything.

     var invData = [];
     var xmlinvsource = "https://www.mebcs.com/Indy/inventory_SMALL.xml";

    function readxml(url)
    {
        xmlHttp = new window.XMLHttpRequest();
        xmlHttp.open("GET",url,false);
        xmlHttp.send(null);
        xmlDoc = xmlHttp.responseXML.documentElement;
        return xmlDoc;
    }

    function makeInv(xmldoc) {
        var output = [];
        var segments = xmldoc.getElementsByTagName("segment");
        for(var i = 0; i < segments.length; i++) {
            var e = segments[i];
            var pid = e.getAttribute("pid");
            var pidnetworkid = e.getAttribute("networkid");
            var pidbranchid = e.getAttribute("branchid");
            var pidsectionid = e.getAttribute("sectionid");
            var piduse = e.getAttribute("use");
            var pidusec = e.getAttribute("usecategory");
            var pidsurface = e.getAttribute("surface");
            var pidsurfacec = e.getAttribute("surfacecategory");
            var pidDate = e.getAttribute("inspDate");
            var pidPCI = e.getAttribute("PCI");
            var pidIRI = e.getAttribute("IRI");
            var pidRN =e.getAttribute("RN");
            var items = [
                                     {label : "NetworkID"        , value : pidnetworkid  },
                                     {label : "BranchID"         , value : pidbranchid   },
                                     {label : "SectionID"        , value : pidsectionid  },
                                     {label : "Branch Use"       , value : piduse        },
                                     {label : "Use Category"     , value : pidusec       },
                                     {label : "Surface"          , value : pidsurface    },
                                     {label : "Surface Category" , value : pidsurfacec   },
                                     {label : "Inspection Date"  , value : pidDate       },
                                     {label : "PCI"              , value : pidPCI        },
                                     {label : "IRI"              , value : pidIRI        },
                                     {label : "RN"               , value : pidRN         }
                        ];
            var inv = [
                       {label    : pid, 
                        value    : pid, 
                        expanded : false,
                        items    : items
                       }          
                      ];
            output[i] = inv;
        }
        console.log (output);
        return output;
    }

     function loadinventorydata() {
       var myinvxml = readxml(xmlinvsource);
       invData = makeInv(myinvxml);
       $('#invlist').jqxTree({ source: invData , height: '300px', width: '100%', checkboxes: false});
     }

[mebcsParticipant]

If I use : console.debug(output.join(‘\n’)); I only get:

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

[DimitarParticipant]

Hi mebcs,

Please try alert($.toJSON(output)).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mebcsParticipant]

I used JSON.stringify(output);

[[{"label":"RES::04TH_E_AV::10","value":"RES::04TH_E_AV::10","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"04TH_E_AV"},{"label":"SectionID","value":"10"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"AAC"},{"label":"Surface Category","value":"FLEXIBLE"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"38"},{"label":"IRI","value":"390.54"},{"label":"RN","value":"1.67"}]}],[{"label":"RES::04TH_E_AV::5","value":"RES::04TH_E_AV::5","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"04TH_E_AV"},{"label":"SectionID","value":"5"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"AAC"},{"label":"Surface Category","value":"FLEXIBLE"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"43"},{"label":"IRI","value":"472.69"},{"label":"RN","value":"1.62"}]}],[{"label":"RES::05TH_E_AV::5","value":"RES::05TH_E_AV::5","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"05TH_E_AV"},{"label":"SectionID","value":"5"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"AC"},{"label":"Surface Category","value":"FLEXIBLE"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"1"},{"label":"IRI","value":"383"},{"label":"RN","value":"1.49"}]}],[{"label":"RES::06TH_E_AV::10","value":"RES::06TH_E_AV::10","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"06TH_E_AV"},{"label":"SectionID","value":"10"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"PCC"},{"label":"Surface Category","value":"RIGID"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"31"},{"label":"IRI","value":"336.25"},{"label":"RN","value":"2.71"}]}],[{"label":"RES::06TH_E_AV::5","value":"RES::06TH_E_AV::5","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"06TH_E_AV"},{"label":"SectionID","value":"5"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"AC"},{"label":"Surface Category","value":"FLEXIBLE"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"9"},{"label":"IRI","value":"533.71"},{"label":"RN","value":"1.03"}]}],[{"label":"RES::07TH_ST::5","value":"RES::07TH_ST::5","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"07TH_ST"},{"label":"SectionID","value":"5"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"AC"},{"label":"Surface Category","value":"FLEXIBLE"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"33"},{"label":"IRI","value":"238"},{"label":"RN","value":"2.76"}]}],[{"label":"RES::09TH_ST::10","value":"RES::09TH_ST::10","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"09TH_ST"},{"label":"SectionID","value":"10"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"AC"},{"label":"Surface Category","value":"FLEXIBLE"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"27"},{"label":"IRI","value":"263.25"},{"label":"RN","value":"1.97"}]}],[{"label":"RES::09TH_ST::100","value":"RES::09TH_ST::100","expanded":false,"items":[{"label":"NetworkID","value":"RES"},{"label":"BranchID","value":"09TH_ST"},{"label":"SectionID","value":"100"},{"label":"Branch Use","value":"ROADWAY"},{"label":"Use Category","value":"ROADWAY/PARKING"},{"label":"Surface","value":"AC"},{"label":"Surface Category","value":"FLEXIBLE"},{"label":"Inspection Date","value":"7/1/2012"},{"label":"PCI","value":"19"},{"label":"IRI","value":"196.5"},{"label":"RN","value":"1.65"}]}]]

[mebcsParticipant]

Any ideas yet?

[mebcsParticipant]

I have a demo on Wednesday, any chance someone might be able to guide me to a solution?

[DimitarParticipant]

Hi mebcs,

You have created an array of arrays and in each of these – an object corresponding to an item. The correct approach is an array of objects corresponding to the items, as shown in the demo Default Functionality.

Here is the correct version of your array:

[
    {
        "label": "RES::04TH_E_AV::10",
        "value": "RES::04TH_E_AV::10",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "04TH_E_AV"
            },
            {
                "label": "SectionID",
                "value": "10"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "AAC"
            },
            {
                "label": "Surface Category",
                "value": "FLEXIBLE"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "38"
            },
            {
                "label": "IRI",
                "value": "390.54"
            },
            {
                "label": "RN",
                "value": "1.67"
            }
        ]
    },
    {
        "label": "RES::04TH_E_AV::5",
        "value": "RES::04TH_E_AV::5",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "04TH_E_AV"
            },
            {
                "label": "SectionID",
                "value": "5"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "AAC"
            },
            {
                "label": "Surface Category",
                "value": "FLEXIBLE"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "43"
            },
            {
                "label": "IRI",
                "value": "472.69"
            },
            {
                "label": "RN",
                "value": "1.62"
            }
        ]
    },
    {
        "label": "RES::05TH_E_AV::5",
        "value": "RES::05TH_E_AV::5",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "05TH_E_AV"
            },
            {
                "label": "SectionID",
                "value": "5"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "AC"
            },
            {
                "label": "Surface Category",
                "value": "FLEXIBLE"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "1"
            },
            {
                "label": "IRI",
                "value": "383"
            },
            {
                "label": "RN",
                "value": "1.49"
            }
        ]
    },
    {
        "label": "RES::06TH_E_AV::10",
        "value": "RES::06TH_E_AV::10",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "06TH_E_AV"
            },
            {
                "label": "SectionID",
                "value": "10"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "PCC"
            },
            {
                "label": "Surface Category",
                "value": "RIGID"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "31"
            },
            {
                "label": "IRI",
                "value": "336.25"
            },
            {
                "label": "RN",
                "value": "2.71"
            }
        ]
    },
    {
        "label": "RES::06TH_E_AV::5",
        "value": "RES::06TH_E_AV::5",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "06TH_E_AV"
            },
            {
                "label": "SectionID",
                "value": "5"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "AC"
            },
            {
                "label": "Surface Category",
                "value": "FLEXIBLE"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "9"
            },
            {
                "label": "IRI",
                "value": "533.71"
            },
            {
                "label": "RN",
                "value": "1.03"
            }
        ]
    },
    {
        "label": "RES::07TH_ST::5",
        "value": "RES::07TH_ST::5",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "07TH_ST"
            },
            {
                "label": "SectionID",
                "value": "5"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "AC"
            },
            {
                "label": "Surface Category",
                "value": "FLEXIBLE"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "33"
            },
            {
                "label": "IRI",
                "value": "238"
            },
            {
                "label": "RN",
                "value": "2.76"
            }
        ]
    },
    {
        "label": "RES::09TH_ST::10",
        "value": "RES::09TH_ST::10",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "09TH_ST"
            },
            {
                "label": "SectionID",
                "value": "10"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "AC"
            },
            {
                "label": "Surface Category",
                "value": "FLEXIBLE"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "27"
            },
            {
                "label": "IRI",
                "value": "263.25"
            },
            {
                "label": "RN",
                "value": "1.97"
            }
        ]
    },
    {
        "label": "RES::09TH_ST::100",
        "value": "RES::09TH_ST::100",
        "expanded": false,
        "items": [
            {
                "label": "NetworkID",
                "value": "RES"
            },
            {
                "label": "BranchID",
                "value": "09TH_ST"
            },
            {
                "label": "SectionID",
                "value": "100"
            },
            {
                "label": "Branch Use",
                "value": "ROADWAY"
            },
            {
                "label": "Use Category",
                "value": "ROADWAY/PARKING"
            },
            {
                "label": "Surface",
                "value": "AC"
            },
            {
                "label": "Surface Category",
                "value": "FLEXIBLE"
            },
            {
                "label": "Inspection Date",
                "value": "7/1/2012"
            },
            {
                "label": "PCI",
                "value": "19"
            },
            {
                "label": "IRI",
                "value": "196.5"
            },
            {
                "label": "RN",
                "value": "1.65"
            }
        ]
    }
]

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mebcsParticipant]

Ok, I understand the problem but looking at the makeInv routine above, and not really being a JavaScript programmer I don’t see how to correct it.

[DimitarParticipant]

Hi mebcs,

Just change inv‘s definition to:

            var inv = {
                        label    : pid, 
                        value    : pid, 
                        expanded : false,
                        items    : [
                                     {label : "NetworkID"        , value : pidnetworkid},
                                     {label : "BranchID"         , value : pidbranchid},
                                     {label : "SectionID"        , value : pidsectionid},
                                     {label : "Branch Use"       , value : piduse},
                                     {label : "Use Category"     , value : pidusec},
                                     {label : "Surface"          , value : pidsurface},
                                     {label : "Surface Category" , value : pidsurfacec},
                                     {label : "Inspection Date"  , value : pidDate},
                                     {label : "PCI"              , value : pidPCI},
                                     {label : "IRI"              , value : pidIRI},
                                     {label : "RN"               , value : pidRN}
                       };

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts