Question

Hello I am creating a simple website with just HTML/CSS and Javascript because I can not use ServerSide languages ( server doesn’t support them) and now I am creating the routing of my website with jQuery/AJAX and even with my low Javascript knowledge I managed to create the most. But I cannot find out how to get the right index from my JSON file.

the JSON file is as follows:

{
  "home": {
      "pattern": "/home",
      "target":  "home.html"
  },
  "webshop": {
      "pattern": "/webshop",
      "target":  "webshop.html"
  }
}

and the jQuery that I used in my index.html is like:

<script type="text/javascript">
$(document).ready(function() {
//wacht op laden pagina

$.ajax({
  url: 'routing.json',
  async: false,
  dataType: 'json',
  success: function (response) {
    // do stuff with response.
    var nav = $('.nav_menu ul');

    $.each(response, function(route) {
        for(var i=0;i<route.length;i++){
        console.log("route["+i+"] is =>"+route[i]);
    }
        nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>');

    });

  }

});

});
</script>

Now is the problem that in my jQuery part I don;t know how to create the right links ( see the route )

nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>');

Answer 1

Not sure why you have a further for loop in the $.each(). It is not necessary. Instead, try

$.each(response, function(id,route) {
    nav.append('<li><a href="index.html/#/' + route.target + '">' + route.pattern + '</a></li>');
});