jQuery UI Widgets Forums Navigation Tree Trouble creating correct array for tree.

This topic contains 13 replies, has 2 voices, and was last updated by  Dimitar 9 years, 11 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author

  • mebcs
    Participant

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

    Dimitar
    Participant

    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/


    mebcs
    Participant

    How do i dump the resulting array?


    mebcs
    Participant

    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]

    Dimitar
    Participant

    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/


    mebcs
    Participant

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

    mebcs
    Participant

    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]


    Dimitar
    Participant

    Hi mebcs,

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

    Best Regards,
    Dimitar

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


    mebcs
    Participant

    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"}]}]]

    • This reply was modified 9 years, 11 months ago by  mebcs.

    mebcs
    Participant

    Any ideas yet?


    mebcs
    Participant

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


    Dimitar
    Participant

    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/


    mebcs
    Participant

    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.


    Dimitar
    Participant

    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/

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.