JavaScript code for loading data JSON files

Question

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>

Get rid of the onclick if you use jQuery event listeners. Also ID's can't be repeated in a page, they are unique by definition — charlietfl
– charlietfl, Commented Nov 10, 2018 at 21:33

mbgurbuz · Accepted Answer · 2022-05-28 16:25:00Z

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>

João Pimentel Ferreira · Accepted Answer · 2018-11-10 21:38:26Z

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>

Thank you! I am still not getting any new text when I select the tabs, however. Is the id="speakers" not correct? Is it supposed to be id="toobin.json" (for example)?
You are making a Ajax request to a file with the url, and there is no file

Vladimir Mujakovic · Accepted Answer · 2018-11-10 21:50:04Z

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?

Collectives™ on Stack Overflow

JavaScript code for loading data JSON files

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related