CODEWITHSUNDEEP
javascriptjqueryhtmljson
Atlante Avila
Atlante Avila

Reputation: 1488

Use jquery to dynamically create a file path based on the id of a link users click

I'm trying to build a dynamic path to specific json files on click of several links. This is for a restaurant menu. When a user clicks a link I want to have the json data returned an parsed in to html inside a div. I have that part working, but when I try to change the path of the json file I get a 404 error with a blank.json file does not exist. Here's my code:

$( document ).ready(function() {
$('.linki').click(function(){
  var gJsn = this.id;
  $.getJSON( 'json/'+gJsn+'.json', function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
    console.log(key + ' ' + val + ' ' + gJsn);
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( ".menuHere" );
});
});
});

specifically the problem lies here on line four:

$.getJSON( 'json/'+gJsn+'.json', function( data ) {

Getting the json file with a specific path works just fine: 

$.getJSON( 'json/soups.json', function( data ) {

So what am I doing wrong? I thought this.id would work just fine. Thanks in advance for your help!

Here is my navigation menu code:

<nav>
  <ul  class="nav">
    <li id="soup" class="menu-item menu-item-21"><a href="#soup" class="linki">Soup</a></li>
    <li id="appetizers" class="menu-item menu-item-26"><a href="#appetizers" class="linki">Appetizers</a></li>
    <li id="menu-item-25" class="menu-item menu-item-25"><a href="#events" class="linki">Family Style Dinners</a></li>
    <li id="menu-item-29" class="menu-item menu-item-29"><a href="#suppliers" class="linki">Mu-Shu</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Fried Rice</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Mein</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Pan Fried Noodle</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Fun</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Drinks</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Egg Fu Yung</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Sizzling Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Vegetable Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pork Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Prawn Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Lunch Specials</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chef's Specials</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chicken Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Beef Entree</a></li>
  </ul>
</nav>

Also, one item I would like to identify is how to remove the previously json data and load the new one when an item is clicked? Am I approaching this the wrong way?

Upvotes: 1

Views: 944

Answers (1)

AmmarCSE
AmmarCSE

Reputation: 30597

change 

var gJsn = this.id;

to

var gJsn = $(this).closest('.menu-item').attr('id');

Upvotes: 3

Related Questions