CODEWITHSUNDEEP
javascriptjqueryhtmljson
Samantha Hayes
Samantha Hayes

Reputation: 47

JavaScript code for loading data JSON files

I am trying to retrieve the JSON files when clicking on the navigation tabs in this webpage. While the text will italicize when I hover the mouse over it, I cannot click on the tabs to retrieve the JSON information. What in the code do I need to change to ensure that the tabs on the navigation bar are click-able?

$(document).ready(function () {
    //on click for <a> element
    $("a").click(function () {
        var title = $(this).attr("title");
        getJSON(title+".json");
    });

}); // end ready
function getJSON(jsonFileURL) {
    $.ajax({
        url: jsonFileURL,
        //handle as text
        dataType: "text",
        success: function (data) {
            //data downloaded + pass data
            var json = $.parseJSON(data);
            // display results
            $("main > h2").html(json.speakers[0].month + "<br/>" + json.speakers[0].speaker);
            $("main > h1").html(json.speakers[0].title);
            $("main > img").attr("src", json.speakers[0].image);
            $("main > p").html(json.speakers[0].text);
        }
    });
}
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Load Speaker Files</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="speaker.js"></script>
    <link rel="stylesheet" href="main.css">
</head>

<body>
   <header>
       <img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
       <h1><a id="top">San Joaquin Valley Town Hall</a></h1>
       <h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
   </header>

   <main>
       <h1>The Supreme Nine: Black Robed Secrets</h1>
       <img src="images/toobin_court.jpg">
       <h2>October<br>Jeffrey Toobin</h2>
       <p>Author of the critically acclaimed best seller, The Nine: Inside the
           Secret World of the Supreme Court, Jeffrey Toobin brings the inside
           story of one of America's most mysterious and powerful institutions to
           the Saroyan stage. At the podium, Toobin is an unbiased, deeply analytic
           expert on American law, politics and procedure and he provides a unique
           look into the inner workings of the Supreme Court and its influence.
       </p>
   </main>

   <aside>
       <h1 id="speakers">This Year&rsquo;s Speakers</h1>
       <nav id="nav_list">
           <ul>
               <li><a id="speakers" onclick = "ready()" title="toobin">October<br>Jeffrey Toobin</a></li>
               <li><a id="speakers" onclick = "ready()" title="sorkin">November<br>Andrew Ross Sorkin</a id="myAnchor" onclick = "ready()"a></li>
               <li><a id="speakers" onclick = "ready()" title="chua">January<br>Amy Chua</a></li>
               <li><a id="speakers" onclick = "ready()" title="sampson">February<br>Scott Sampson</a></li>
           </ul>
       </nav>
   </aside>
   <footer>
       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
   </footer>
</body>
</html>

Upvotes: 4

Views: 483

Answers (3)

mbgurbuz
mbgurbuz

Reputation: 11

I gave Id to main tag and used a href instead of id in nav_list. Also I changed .js file a little. I believe this should work. Here is .js file;

$(document).ready(function () {
//on click for <a> element
$("a").click(function () {
    var t_atr = $(this).attr("title");
    var url = ("json_files/"+t_atr+".json");  //path to .json files      
        $.getJSON(url, function(json) {
            json.speakers.forEach(element => {
                console.log(element);        //check data
                $('#title').html(element.title);
                $('#image').attr('src',element.image);
                $('#monthspeak').html(element.month+"<br>"+element.speaker);
                $('#text').html(element.text);
            }); 
        });
   });
});

Here is the changing part in .html file;

<main id="mn">     //gave id
    <h1 id="title">The Supreme Nine: Black Robed Secrets</h1>
    <img id="image" src="images/toobin_court.jpg">
    <h2 id="monthspeak">October<br>Jeffrey Toobin</h2>
    <p id="text">Author of the critically acclaimed best seller, The Nine: Inside the
        Secret World of the Supreme Court, Jeffrey Toobin brings the inside
        story of one of America's most mysterious and powerful institutions to
        the Saroyan stage. At the podium, Toobin is an unbiased, deeply analytic
        expert on American law, politics and procedure and he provides a unique
        look into the inner workings of the Supreme Court and its influence.
    </p>
</main>

<aside>
    <h1 id="speakers">This Year&rsquo;s Speakers</h1>
    <nav id="nav_list">
        <ul>
            <li><a href="#" title="toobin">October<br>Jeffrey Toobin</a></li>  //use a href="#"
            <li><a href="#" title="sorkin">November<br>Andrew Ross Sorkin</a></li>
            <li><a href="#" title="chua">January<br>Amy Chua</a></li>
            <li><a href="#" title="sampson">February<br>Scott Sampson</a></li>
        </ul>
    </nav>
</aside>

Upvotes: 1

Vladimir Mujakovic
Vladimir Mujakovic

Reputation: 680

Without having access to the json files I can tell you off the bat that your click handler is targeting all <a> elements so I would remove the onclick="ready()" attributes. $(document).ready() is a jQuery function that will execute the code after the document is loaded. So it should not be referenced directly in your onclick property. Especially since you have already attached an event listener for your a tags.

Next HTML id's should be unique, currently all your a tags have the same id. For multiple elements a class should be used.

<li><a class="some-class"  title="toobin">October<br>Jeffrey Toobin</a></li>

I would use a more specific selector. Maybe add a class to you links. And then:

$(document).ready(function () {
    //on click for <a> element
    $(".aClass").click(function () {
        var title = $(this).attr("title");
        getJSON(title+".json");
    });

});

I am assuming you have a number of JSON files you are pulling with each title as a file name?

Upvotes: 0

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16233

I made some small changes to your code and it should work, as long as you have the json files available on the server. You had some errors on onclick = "ready()" and if you use jQuery click function you don't need to use onlick attribute.

$(document).ready(function () {
    //on click for <a> element
    $("a").click(function () {
        var title = $(this).attr("title");        
        getJSON(title+".json");
    });

}); // end ready
function getJSON(jsonFileURL) {
    alert(jsonFileURL);
    $.ajax({
        url: jsonFileURL,
        //handle as text
        dataType: "text",
        success: function (data) {
            //data downloaded + pass data
            var json = $.parseJSON(data);
            // display results
            $("main > h2").html(json.speakers[0].month + "<br/>" + json.speakers[0].speaker);
            $("main > h1").html(json.speakers[0].title);
            $("main > img").attr("src", json.speakers[0].image);
            $("main > p").html(json.speakers[0].text);
        }
    });
}
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Load Speaker Files</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="speaker.js"></script>
    <link rel="stylesheet" href="main.css">
</head>

<body>
   <header>
       <img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
       <h1><a id="top">San Joaquin Valley Town Hall</a></h1>
       <h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
   </header>

   <main>
       <h1>The Supreme Nine: Black Robed Secrets</h1>
       <img src="images/toobin_court.jpg">
       <h2>October<br>Jeffrey Toobin</h2>
       <p>Author of the critically acclaimed best seller, The Nine: Inside the
           Secret World of the Supreme Court, Jeffrey Toobin brings the inside
           story of one of America's most mysterious and powerful institutions to
           the Saroyan stage. At the podium, Toobin is an unbiased, deeply analytic
           expert on American law, politics and procedure and he provides a unique
           look into the inner workings of the Supreme Court and its influence.
       </p>
   </main>

   <aside>
       <h1 id="speakers">This Year&rsquo;s Speakers</h1>
       <nav id="nav_list">
           <ul>
               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>
               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>
               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>
               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>
           </ul>
       </nav>
   </aside>
   <footer>
       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
   </footer>
</body>
</html>

Upvotes: 0

Related Questions