Javascript add sum of products

JavaScript
1

i have phones i a json file and have fetched them , now i AM trying to print out the sum (price of all phones in the cart site) but nothing works, please help me :slight_smile:

code below:

var products = []

function calculator() {
    var productPrice = document.getElementById("sumOfProducts")
    for(var i = 0; i < listOfProducts.length; i++) {
        if (productPrice == listOfProducts[i].price) {
            var productPriceSum = {
                price: listOfProducts[i].price
            }

            var parentDivTwo = document.getElementById("sumOfProducts")

            getPhonePriceSum = document.createElement("h3")
            getPhonePriceSum.innerText = productPriceSum.price + " kr"
            parentDivTwo.appendChild(getPhonePriceSum)
        }
        console.log("test")
    }
}
2

What does the data in the file of phones look like?

But there are a number of things that don’t make sense in the code there:

function calculator() {

So you get a reference to an HTML element: this is an object that represents the actual HTML element:

    var productPrice = document.getElementById("sumOfProducts")

    for(var i = 0; i < listOfProducts.length; i++) {

Then I am assuming products[i].price is a number. So with the following condition you are checking whether an HTML element is the same as a number, which can never be true because a number and an object are completely different things. So nothing in the if block ever runs:

        if (productPrice == listOfProducts[i].price) {

If I ignore that: here you already have the price, but you’re putting it inside an object for some reason:

            var productPriceSum = {
                price: listOfProducts[i].price
            }

Then you get a reference to the same object as before (you’ve already assigned this to productPrice, so there is no point to adding another reference):

            var parentDivTwo = document.getElementById("sumOfProducts")

Then you append the prices to that element:

            getPhonePriceSum = document.createElement("h3")
            getPhonePriceSum.innerText = productPriceSum.price + " kr"
            parentDivTwo.appendChild(getPhonePriceSum)
        }
        console.log("test")
    }
}
  1. There is an element with the id #sumOfProducts:
    <div id="sumOfProducts"></div>
  2. You loop through the phone prices and append them to the div:
    <div id="sumOfProducts">
  <h3>100kr</h3>
  <h3>500kr</h3>
  <h3>60kr</h3>
  ....
</div>
  3. This never occurs, because you’ve set it up so that the code that does this never runs.
3

this is how my json file looks
{
“phones”: [
{
“title”: “iPhone X”,
“description”: “Last years phone from Apple with a beautiful all display front.”,
“image”: “iPhoneX.png”,
“price”: 11495
},{
“title”: “One Plus 5”,
“description”: “Sleek and powerful smartphone from One Plus.”,
“image”: “OnePlus5.png”,
“price”: 4995
},{
“title”: “Galaxy S8”,
“description”: “Really cool edge to edge smartphone from Samsung.”,
“image”: “SamsungS8.png”,
“price”: 7990
},{
“title”: “LG V30”,
“description”: “Super nice and beautiful smartphone from LG.”,
“image”: “LGV30.png”,
“price”: 7495
},{
“title”: “Honor 10”,
“description”: “The phone is powered by Huawei’s Kirin 970 chipset, 4 GB of RAM, 128 GB of storage.”,
“image”: “honor-10.png”,
“price”: 4190
},{
“title”: “Huawei Mate 20 Pro”,
“description”: “The Mate 20 Pro is sports a large, high-res OLED display with a notch at the top housing a face-recognition system.”,
“image”: “huawei-mate-20-pro.png”,
“price”: 9990
},{
“title”: “iPhone XR”,
“description”: “The iPhone XR is an affordable, yet still very capable alternative to the iPhone XS.”,
“image”: “Iphone_xr.png”,
“price”: 9490
},{
“title”: “Microsoft Lumia 950”,
“description”: “Lumia 950 is a premium phone made by Microsoft and running on Windows 10.”,
“image”: “lumia-950.png”,
“price”: 3496
},{
“title”: “Samsung Galaxy S9 plus”,
“description”: “Galaxy S9 is the company’s flagship smartphone for 2018.”,
“image”: “SAMSUNG-S9-Plus.png”,
“price”: 8189
},{
“title”: “Sony Xperia XZ3”,
“description”: “XZ3 is a high-end Android flagship phone and with an OLED display.”,
“image”: “sony-xperia-xz3.png”,
“price”: 7990
}
]
}

4

i have an onload = initSite in html

function initSite() {
        for(var i = 0; i < listOfProducts.length; i++) {
            if (listOfProducts[i].title) {
                var productPriceSum = {
                price: listOfProducts[i].price
                }
                
                var parentDivTwo = document.getElementById("sumOfProducts")
                var getPhonePriceSum = document.createElement("h3")
                getPhonePriceSum.innerText = productPriceSum.price + " kr"

                parentDivTwo.appendChild(getPhonePriceSum)
            }
            console.log(productPriceSum)
        }
    }