How can I get my JSON Data to appear in my HTML page?

Question

I have 2 JSON files that should change the data of the page when I click on a button. Could someone help me determine how I can accomplish this?

Here is my JSON file(there is a second one in this exact format and the same number of content):

{
    "ranking": "National Universities",
    "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.",
    "badge": "/img/national-universities-badge.svg",
    "rankings": [
        {
            "rank": 1,
            "institution": "Princeton University",
            "location": "Princeton, NJ"
        },
        {
            "rank": 2,
            "institution": "Harvard University",
            "location": "Cambridge, MA"
        },
        {
            "rank": 3,
            "institution": "University of Chicago (tie)",
            "location": "Chicago, IL"
        }
    ]
}

Here is my HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Webpack App</title>

        <script>

        $(document).ready(function() {

            var compute = function() {

                $.getJSON("C:\Users\rohit\Downloads\fed-assessment\fed-assessment\src\data\data-1.json" , function(data1) {
                    document.getElementById("ranking").innerHTML = data1.ranking;
                    document.getElementById("description").innerHTML = data1.description;
                    document.getElementById("badge").innerHTML = data1.badge;
                    };

                });



        });

        </script>

    </head>
    <body>
        <div id="content"></div>

        <div class="">
    <div class="">
        <h2 id="ranking"></h2>
        <p id="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing
            elit. Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum
            temporibus.
        </p>
        <div class="">
            <div>
                <img class="badge" src="/img/national-universities-badge.svg" alt="">
            </div>
            <div class="">
                <ul>
                    <li class="">
                        <strong>#1</strong>
                        <div class="">
                            <a href="">Name of college</a>
                            <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div>
                        </div>
                    </li>
                    <li class="">
                        <strong>#2</strong>
                        <div class="">
                            <a href="">Name of college</a>
                            <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div>
                        </div>
                    </li>
                    <li class="">
                        <strong>#3</strong>
                        <div class="">
                            <a href="">Name of college</a>
                            <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="dummyAd">
        <img class="add" height="250px" width="300px" src="http://placehold.it/600x500?text=dummy+ad">
    </div>
</div>
        <button id="button" onclick="compute()">Toggle Ranking List</button>
        <script src="bundle.js"></script>
    </body>
</html>

i think `$.getJSON` won't work with `file:///` protocol, and `#badge` is an image tag so use `.src` not `.innerHTML` — Mamdouh Saeed, Nov 09 '16 at 00:04

score 0 · Answer 1 · answered Nov 09 '16 at 00:08

As Mamdouh said above. Tested to work without loading from file. Also You had not ID for badge(it is set to a class) so

document.getElementById("badge").innerHTML = data1.badge

will not work.

var data1 = { "ranking": "National Universities", "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.", "badge": "/img/national-universities-badge.svg", "rankings":
[ { "rank": 1, "institution": "Princeton University", "location": "Princeton, NJ" }, { "rank": 2, "institution": "Harvard University", "location": "Cambridge, MA" }, { "rank": 3, "institution": "University of Chicago (tie)", "location": "Chicago, IL"
} ] }; 

document.getElementById("ranking").innerHTML = data1.ranking; document.getElementById("description").innerHTML = data1.description; document.getElementById("badge").innerHTML = data1.badge;

<h2 id="ranking"></h2 >
<p id = "description">
   Lorem ipsum dolor sit amet, consectetur adipisicing
   elit.Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum
   temporibus. 
</p>

<div id="badge"></div>

score 0 · Answer 2 · edited May 23 '17 at 12:19

Some correction is needed in your code :

$.getJSON not working with local JSON file as it is only working with protocols.

you always get this error in console if use local JSON file

XMLHttpRequest cannot load file:///C:\Users\rohit\Downloads\fed-assessment\fed-assessment\src\data\data-1.json. Origin null is not allowed by Access-Control-Allow-Origin.

Reference : JQuery $.getJSON load local JSON file not working

You define badge as a class not an id.So, correct syntax will be

<img id="badge" src="/img/national-universities-badge.svg" alt="">

then this statement document.getElementById("badge").src = data1.badge; will work.

Working demo :

var data = {
    "ranking": "National Universities",
    "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.",
    "badge": "/img/international-universities-badge.svg",
    "rankings": [
        {
            "rank": 1,
            "institution": "Princeton University",
            "location": "Princeton, NJ"
        },
        {
            "rank": 2,
            "institution": "Harvard University",
            "location": "Cambridge, MA"
        },
        {
            "rank": 3,
            "institution": "University of Chicago (tie)",
            "location": "Chicago, IL"
        }
    ]
}

function toggleData() {
  document.getElementById("ranking").innerHTML = data.ranking; 
  document.getElementById("description").innerHTML = data.description; 
  document.getElementById("badge").src = data.badge;
  }

<h2 id="ranking"></h2>
<p id="description">
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum
    temporibus.
</p>
<img id="badge" src="/img/national-universities-badge.svg" alt=""/><br>
<button id="button" onclick="toggleData()">Toggle Ranking List</button>

How can I get my JSON Data to appear in my HTML page?

2 Answers2