I am trying to make a dynamic top navigation bar in JavaScript, pulling data fro

Question

I am trying to make a dynamic top navigation bar in JavaScript, pulling data from a SharePoint list using Ajax. In my code I can only pull Parent, child, but not the grandson. in my list I have ID, item_url, item_name, parent, weigth, description. I will post my code to see how someone can help me with this issue.

<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>

<script type="text/javascript">

    var url = "I have this code already";
    var _sp_records;
    function _init() {

        $.ajax(          

            {
                url: url,
               method: "GET",
               headers: { "Accept": "application/json; odata=verbose" },
               success: function(data) {

                   _sp_records = data.d.results;
                   console.log(buildTree(_sp_records));

               },
               error: function(data) {

               }

           }

           );
    }

    function buildTree(records) {
       
        var _treeBuild = [];

        $.each(records, function(index) {

            var buildInnerTree = {};
            var record = records[index];
            var recordID = records[index].ID;

            buildInnerTree["ID"] = recordID;
            buildInnerTree["item_name"] = record.item_name;
            buildInnerTree["weight"] = record.weight;
            buildInnerTree["item_url"] = record.item_url;
            buildInnerTree["parentId"] = record.parentId;

            var children = getChildren(recordID);

            if(children.length > 0 ) {
                buildInnerTree["children"] = buildTree(children);
                _treeBuild.push(buildInnerTree);
                return _treeBuild;
            }

            if(record.parentId == null) {
                _treeBuild.push(buildInnerTree);
            }

        });

        return _treeBuild;
        // console.log(_treeBuild);
        // var main = $("#menu-template").html();
        // var list = $("#list").html();
        // Handlebars.registerPartial( "list", list );
        // var mainTemplate = Handlebars.compile(main);
       
        // var compiled = mainTemplate({ children: _treeBuild });

        // $("#nav-menu").html(compiled);

    }

    function getChildren(id) {
       
        var filteredResult = _sp_records.filter( function(item) {
           
       
              if(item.parentId == id) {
                 
                  return true;
              }

            return false;
        });

        return filteredResult;

    };

    $(document).ready(function() {

        _init();

    });
</script>

<script id="list" type="text/x-handlebars-template">
       {{#each children}}

           <li>{{item_name}}
           {{#if children}}
               <ul>
                   {{> list}}
               </ul>
           {{/if}}
           </li>
       {{/each}}

</script>

<script type="text/x-handlebars-template" id="menu-template">
  
   <ul id="menu">

       {{> list}}

   </ul>
  
</script>

<div id="nav-menu" >
  
</div>

thank you in advance

Explanation / Answer

Answer:

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.