Struggling to display my JSON file in an HTML element with AJAX

Question

Struggling to display my JSON file in an HTML element with AJAX

Having some trouble here. I can successfully print my JSON file content to the console using console.log, but now I'm trying to display it on the page.

I want to display the 'Information' section from the JSON file using innerHTML like this:

https://i.sstatic.net/TFX6V.png

The second part should display the 'Websites' section as a list.

This is my current JavaScript code:

var xhr = new XMLHttpRequest();

xhr.onload = function() {
    if(xhr.status === 200) {
        console.log(xhr.responseText);

        var jsonStr = JSON.parse(xhr.responseText);
        document.getElementById("info").innerHTML += Student[0].Namn + ", ";
    }
};

xhr.open("GET", "student.json", true);
xhr.send(null);

I'm having trouble accessing and displaying the specific object I need.

This is my JSON data:

{
    "Student": [
        {
            "Information": 
                {
                    "Namn" : "Emil",
                    "Email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2979f9b9e82993e99999cbbb2999f939b9ecdc09d9c">[email protected]</a>",
                    "City" : "Linköping",
                    "Website" : "http://studenter.miun.se/~empa1600/"
                }

        },
        {
            "Websites": [
                {
                    "Sitename" : "komplett",
                    "SiteURL" : "https://www.komplett.se/",
                    "Description" : "Great site for tech purchases"
                },
                {
                    "Sitename": "Inet",
                    "SiteURL": "https://www.inet.se/",
                    "Description": "Competing site against Komplett"
                },
                {
                    "Sitename": "SF",
                    "SiteURL": "https://www.sf.se/",
                    "Description": "When you're going to the movies with your friend"
                },
                {
                    "Sitename": "Code Academy",
                    "SiteURL": "https://www.codecademy.com/",
                    "Description": "Learn how to code"
                },
                {
                    "Sitename": "Miun",
                    "SiteURL": "https://www.miun.se/",
                    "Description": "Where we learn everything"
                }
            ]
        }
    ]
}

I want the first section to be displayed

Another screenshot of my current website: https://gyazo.com/ef4b02c9474f443747df6fcdaf5537b6

I once managed to display using innerHTML but it just showed undefined, which I don't understand.

How can I display the 'Information' section like the first image and then list the websites in a <li> element?

Thanks!

Edit: How do I now display and style the 'Websites' array from the JSON data? And have them as clickable links?

This is what I've tried:

function printOut(){
        jsonStr.Student[1].Websites.forEach(w => {
            document.getElementById("sites").innerHTML += w.Sitename + "<br>";
        });

    }
    printOut();

javascript json ajax dom

Answer 1

Answer №1

Give this a try:

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange= function() {
if(xhttp.readyState == 4 && xhttp.status == 200) {
    console.log(xhttp.responseText);

    let data = JSON.parse(xhttp.responseText);




    document.getElementById("info").innerHTML += Student[0].Name + ", ";




}
};

xhttp.open("GET", "student-info.json", true);
xhttp.send(null);

Answer 2

Give this a try:

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange= function() {
if(xhttp.readyState == 4 && xhttp.status == 200) {
    console.log(xhttp.responseText);

    let data = JSON.parse(xhttp.responseText);




    document.getElementById("info").innerHTML += Student[0].Name + ", ";




}
};

xhttp.open("GET", "student-info.json", true);
xhttp.send(null);

Answer 3

Answer №2

Your code is missing the Student variable. The Student property is part of the object that is returned from the JSON.parse() method and is stored in the jsonStr variable.

Additionally, the Namn property is nested within the Information property, so you must include it in your code like this:

jsonStr.Student[0].Information.Namn

.

You can find more information on accessing nested objects, arrays, or JSON data by visiting this link.

To access the Website data, you will need to loop through the array using a similar method. Here is an example:

var sitesList = "<ul>";
jsonStr.Student[1].Websites.forEach(site => {
    sitesList += `<li><a href="${site.SiteURL}">${site.Description}</a></li>`;
});
sitesList += "</ul>";
document.getElementById("sites").innerHTML = sitesList;

Answer 4

Your code is missing the Student variable. The Student property is part of the object that is returned from the JSON.parse() method and is stored in the jsonStr variable.

Additionally, the Namn property is nested within the Information property, so you must include it in your code like this:

jsonStr.Student[0].Information.Namn

.

You can find more information on accessing nested objects, arrays, or JSON data by visiting this link.

To access the Website data, you will need to loop through the array using a similar method. Here is an example:

var sitesList = "<ul>";
jsonStr.Student[1].Websites.forEach(site => {
    sitesList += `<li><a href="${site.SiteURL}">${site.Description}</a></li>`;
});
sitesList += "</ul>";
document.getElementById("sites").innerHTML = sitesList;

Answer 5

Answer №3

After reviewing the code provided earlier, I believe that substituting onload with onreadystatechange and updating your if statement to

if(xhr.readyState == 4 && xhr.status == 200)

would effectively ensure that the ajax message is transmitted correctly.

Answer 6

After reviewing the code provided earlier, I believe that substituting onload with onreadystatechange and updating your if statement to

if(xhr.readyState == 4 && xhr.status == 200)

would effectively ensure that the ajax message is transmitted correctly.

Struggling to display my JSON file in an HTML element with AJAX

Answer №1

Answer №2

Answer №3

Similar questions

AngularJS and the power of checkbox filtering

Endless Loop of Http Redirects in Node.js with Express

Tips for creating a state change function using TypeScript

Move the cursor within the text area upon clicking the button

Trouble with JavaScript confirm's OK button functionality in Internet Explorer 11

Transmitting extensions via AJAX

When dealing with back-end data in JavaScript, converting long types can result in a

Manipulating object attributes in three.js using WebGL

Tips for making a slide-in animation that doesn't require adjusting the browser size

Utilizing Firebase Cloud Messaging for push notifications in Twilio Conversations

The ItemFileReadStore fetch function encounters issues when the response data contains nested objects

Expanding the capabilities of the Express Request Object using TypeScript

Attempting to design a versatile button in react js that has multiple functions. On the initial click, it saves data, changes the display to "view", and with a second click, it redirects to the saved page

How to Retrieve URL Before Closing a jQuery Window Using window.open()?

Converting JSON data into a C# List of objects

Trouble seeing span in ion-item in Ionic 2: How can I display plain text instead?

Create a password variable while typing

Problem with Jsdom retrieving document

Different approach to iterating through elements

Working with SimpleXML Objects in PHP, using functions like json_encode and json_decode