Convert to external JSON

Question

I'm new to JS, and I need some help.

I added a JSON template into my project. What I want is, separating the JSON input as a external file and load it into JS a variable.

This is what I have so far.

var menuItems = [
    {

        "name": "SIGHTS",
        "url": "#",
        "submenu": [
            {
                "name": "DIAMOND",
                "url": "#"
            },
            {
                "name": "THREE-POINT",
                "url": "#"
            },
            {
                "name": "TRIJICON SRO",
                "url": "#"
            }
        ]
    },
    {
        "name": "LIGHTS",
        "url": "#",
        "submenu": []
    },
    {
        "name": "LASERS",
        "url": "#",
        "submenu": []
    },
    {
        "name": "GRIPS",
        "url": "#",
        "submenu": []
    },
    {
        "name": "MAGAZINES",
        "url": "#",
        "submenu": [
            {
                "name": "7.5FK",
                "url": "#"
            },
            {
                "name": "9mm",
                "url": "#"
            },
        ]
    },
    {
        "name": "STOCKS",
        "url": "#",
        "submenu": [

        ]
    },
    {
        "name": "BRACES",
        "url": "#",
        "submenu": [
            {
                "name": "Folding Brace",
                "url": "#"
            },
        ]
    }   
]

var mainMenu = "<ul>";
for (var m = 0; m < menuItems.length; m++) {
    mainMenu += "<li>";
    mainMenu += "<a href='" + menuItems[m].url + "'>" + menuItems[m].name + "</a>";
    if (menuItems[m].submenu.length > 0) {
        mainMenu += "<ul>";
        for (var n = 0; n < menuItems[m].submenu.length; n++) {
            mainMenu += "<li>";
            mainMenu += "<a href='" + menuItems[m].submenu[n].url + "'>" + menuItems[m].submenu[n].name + "</a>";
            mainMenu += "</li>";
        }
        mainMenu += "</ul>";
    }
    mainMenu += "</li>";
}

document.getElementById("mainMenu").innerHTML = mainMenu;

@import url(https://fonts.googleapis.com/css?family=Open+Sans);



.clear {
  clear: both;
}

.menu {

  background: rgba(0, 0, 0, 0.5);
  font-family: "Open Sans", sans-serif;
  display: block;
  min-height: 48px;
  font-weight: bold;
  font-size: 0.76em;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu ul {
  padding-left: 30%;

  display: block;
  margin: 0px;
  list-style: none;
}

.menu ul li {

  float:left;
  position: relative;
}

.menu ul li a {

  display: block;
  line-height: 48px;
  padding: 0px 20px;
  color: rgb(206, 206, 206);
  text-decoration: none;
}

.menu ul li:hover a {
  color: #3ed8b5;
}

.menu ul li ul {
  position: absolute;
  left: 0px;
  top: 48px;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.menu ul li:hover ul {
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}

.menu ul li ul li {
  float: none;
  border-top: solid 1px #bbb;
}

.menu ul li ul li:first-child {
  border-top: none;
}

.menu ul li ul li a {
  white-space: nowrap;
  line-height: normal;
  padding: 10px;
}

.menu ul li ul li a:hover {
  text-decoration: underline;
}

  <div id="v3d-container">
  <div class="menu">
    <div id="mainMenu"></div>
    <div class="clear"></div>
  </div>