CODEWITHSUNDEEP
javascriptjson
user13848482
user13848482

Reputation:

Displaying JSON information with HTML and JavaScript

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>

Upvotes: 3

Views: 69

Answers (1)

Always Helping
Always Helping

Reputation: 14570

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

  1. For querySelector you need to use class or the id selector so it will check the exact class or id you are looking for
  2. 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>

Upvotes: 1

Related Questions