Displaying JSON information with HTML and JavaScript

Question

I validated my code and syntactically it all seems and looks correct to me. I am console logging my JSON file.

Issue:

I can't access the information from the file. I tried to run the function productInfo on its own. So, I suspect the issue is within there and it's not pulling in the information correctly. But I can't seem to find the exact issue.

Can anyone help with this?

Javascript:

// mapping jsonn file to varibale and starting the request to get information
let requestJson = 'https://brody413.github.io/JS-LAB-8/products.json';
let myRequest = new XMLHttpRequest();
myRequest.open('GET', requestJson);
myRequest.responseType = 'json';
myRequest.send();

// onload event so nothing happens till we have json 
myRequest.onload = function () {
    let jsonFile = myRequest.response;
    console.log(jsonFile);
    productInfo(jsonFile);
}

function productInfo(json) {
    let sectionElement = document.querySelector('section');

    let topDeals = json['topDeals'];
    for (let i = 0; i < topDeals; i++) {
        // creating elements to hold info
        let div = document.createElement('div');
        let h2 = document.createElement('h2');
        let h3 = document.createElement('h3');
        let p1 = document.createElement('p');
        let list = document.createElement('ul');
        let img = document.createElement('img');

        // giving each element the info
        h2.textContent = topDeals[i].name;
        h3.textContent = topDeals[i].price;
        p1.textContent = topDeals[i].description;

        let features = topFlavors[i].features;
        for (let x = 0; x < ingredients.length; x++) {
            let feature = document.createElement('li');
            feature.textContent = features[x];
            list.appendChild(feature);
        }

        div.appendChild(h2);
        div.appendChild(h3);
        div.appendChild(p1);
        div.appendChild(list);
        sectionElement.appendChild(div);

        console.log(div);
    }
}

JSON:

{
    "companyName": "I Scream Inc.",
    "headOffice": "Barrie, Ontario",
    "established": 2001,
    "active": true,
    "topDeals": [{
            "name": "Bacon Scented Mustache",
            "price": 4.07,
            "description": "Now you can smell bacon all day in peace.",
            "features": [
                "smells like bacon",
                "extra manly"
            ],
            "image": "bacon-scented-mustache.jpg"
        },
        {
            "name": "Dill pickle lip balm",
            "price": 11.95,
            "description": "Take your look to the next level with this amazing & dill-icious lip balm",
            "features": [
                "dill-icious",
                "beautiful green colour"
            ],
            "image": "dill-pickle-lip-balm.jpg"
        },
        {
            "name": "Dancing with cats",
            "price": 13.22,
            "description": "Learn intrepetive dance with your feline friend!",
            "features": [
                "all the latest dance moves",
                "truly bond with your cat through dance"
            ],
            "image": "dancing-with-cats.jpg"
        }
    ]
}

<html>
<head>
    <meta charset="utf-8" />
    <title>MOD3 WEEK 8 - JSON</title>
    <script src='main.js' async></script>
    
</head>

<body>
    <header>
        <h1>I Scream INC</h1>
        <p>Product Information is Below</p>
    </header>
    <main>
        <h3>PRODUCTS</h3>
        <section>
    

        </section>
    </main>
    <footer>
        <p>Brody McColeman - WEEK 8 - SUMMER 2020</p>
    </footer>
    </body>
</html>

Answer 1

Few issues in your for statement and also you are not doing querySelector properly.

For querySelector you need to use class or the id selector so it will check the exact class or id you are looking for
I have added and using forEach loop and simplified your code as well

Added comments as well to highlight stuff which needed a fix.

Run snippet below to see it working

 let requestJson = 'https://brody413.github.io/JS-LAB-8/products.json'; let myRequest = new XMLHttpRequest(); myRequest.open('GET', requestJson); myRequest.responseType = 'json'; myRequest.send(); // onload event so nothing happens till we have json myRequest.onload = function() { let jsonFile = myRequest.response; //console.log(jsonFile); productInfo(jsonFile); } function productInfo(json) { //All data will be appended here let sectionElement = document.querySelector('.section'); let topDeals = json['topDeals']; //Foreach Loop for data topDeals.forEach(function(data) { // creating elements to hold info let div = document.createElement('div'); let h2 = document.createElement('h2'); let h3 = document.createElement('h3'); let p1 = document.createElement('p'); let list = document.createElement('ul'); let img = document.createElement('img'); // giving each element the info h2.textContent = data.name; h3.textContent = data.price; p1.textContent = data.description; //Foreach Loop for featues data.features.forEach(function(data) { let feature = document.createElement('li'); feature.textContent = data list.appendChild(feature); }) div.appendChild(h2); div.appendChild(h3); div.appendChild(p1); div.appendChild(list); //Append all the child element to parent.section sectionElement.appendChild(div); }) }

 <section class="section"> </section>

Displaying JSON information with HTML and JavaScript

Question

1 answers

solution1
1 2020-07-15 22:18:56

Displaying JSON information with HTML and JavaScript

Question

1 answers

solution1 1 2020-07-15 22:18:56

solution1
1 2020-07-15 22:18:56