How to read from external JSON and apply to navbar Javascript

Using this as a starting point, how can I alter it to read from an external data.json file? Im fairly new with JQuery. It works when if use

var JSON = {…same structure as from data.json…}

and gives me the expected result: a navbar structured after the json data.

My index.js and index.html

import $, { type } from 'jquery'

try {
    var element = EMBED.getRootElement();
    var navbar = element.find("#navigationDiv");
    const userConfig = EMBED.getComponent().schema.data

    var json = userConfig.jsonfile.file // this is the file uploaded 
    json = (json.split(",").pop()); 
    console.log(json)
    json = atob(json)
    console.log(json)                    // prints out expected result, decoded json from base64

    function makeUL(lst, topLevelUl, rootLvl) {
        console.log("Make ul")
        var html = [];
        if (topLevelUl) {
            html.push('<ul class="nav navbar-nav" id="menu">');
            topLevelUl = false;
        } else {
            html.push('<ul class="submenu dropdown-menu" role="menu">');
        }
        $(lst).each(function () {
            html.push(makeLI(this, topLevelUl, rootLvl))
        });
        html.push('</ul>');
        rootLvl = true;
        return html.join("n");
    }

    function makeLI(elem, topLevelUl, rootLvl) {
        console.log("make Li")
        var html = [];
        if (elem.children && !rootLvl) {
            html.push('<li class="dropdown-submenu dropdown">');
        } else {
            html.push('<li class="dropdown">');
            rootLvl = false;
        }
        //html.push(elem.link);
        if (elem.value) {
            html.push('<a class="dropdown-toggle" data-toggle="dropdown" href="#' + elem.value + '"><i style="height:20px; width:20px;" class="' + elem.icon + '"></i>'  + elem.link + ' </a>');
            //<i style='height:20px; width:20px;' class='" + submenuData[i]["icon"] + "'></i>"
        }

        if (elem.children) {
            html.push(makeUL(elem.children, topLevelUl, rootLvl));
        }
        html.push('</li>');
        return html.join("n");
    }

    $(function () {
        var topLevelUl = true;
        $(navbar).html(makeUL(JSON.menu, topLevelUl, true));
        console.log("lager meny")
        navbar.innerHTML = navbar;
        console.log(navbar)
    });
}
catch {
    console.log("error")
}
<div class="navbar navbar-fixed-top">
    <div id="navigationDiv" class="navbar-inner">
    </div>
</div>

and my data.json

{
  "menu": [
    {
      "id": 4,
      "link": "UnderGrad",
      "value": "undergrad.com",
      "icon": "fas fa-ban",
      "__domenu_params": {},
      "children": [
        {
          "id": 3,
          "link": "art.undergrad",
          "value": "art.undergrad.com",
          "icon": "fas fa-ban",
          "__domenu_params": {},
          "children": [
            {
              "id": 5,
              "link": "classic.art.undergrad",
              "value": "classic.art.undergrad.com",
              "icon": "fas fa-ban",
              "__domenu_params": {},
              "children": [
                {
                  "id": 5,
                  "link": "hey",
                  "value": "hey",
                  "icon": "fas fa-ban",
                  "__domenu_params": {}
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": 2,
      "link": "Grad",
      "value": "grad.com",
      "icon": "fas fa-ban",
      "__domenu_params": {},
      "children": [
        {
          "id": 1,
          "link": "music.grad",
          "value": "music.grad.com",
          "icon": "fas fa-ban",
          "__domenu_params": {}
        },
        {
          "id": 6,
          "link": "science.grad",
          "value": "science.grad.com",
          "icon": "fas fa-ban",
          "__domenu_params": {}
        }
      ]
    }
  ]
}

Answer

To load a json file use jQuery.getJSON().

To replace your code in your fiddle:

var JSON = { menu: [{ "id"...
$("#navigationDiv").html(makeUL(JSON.menu, topLevelUl, true));

you would use:

$.getJSON("data.json", function(data) {
    $("#navigationDiv").html(makeUL(data.menu, topLevelUl, true));  
});

where “data.json” is the url to your external json file

Leave a Reply

Your email address will not be published. Required fields are marked *