Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

ilovecode
ilovecode
8,071 Points
Posted by ilovecode
ilovecode
8,071 Points

I don't understand why result is different in HTML but when logging it it is correct

I am starting to feel like I will never get this right with arrays. This is my issue:

My code:

const products = '../products.json';
const productImg = document.querySelector('.product-image');
const productName = document.querySelector('.product-name');
let row = document.querySelector('.shop-body .row');
let product = [];

fetch(products)
    .then(response => response.json())
    .then(data => generateProduct(data));

function generateProduct(data) {
    let prod = data.map(dat => {
        row.innerHTML = `<div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/${dat.image}" class="img-fluid" alt="${dat.product}">
                                </a>
                                <h4 class="product-name">${dat.product}</h4>
                            </div>
                        </div>`;

        console.log(row.innerHTML);

    });
}

Inside my 'row' selector I get the result of the last element of my .json array. 

<div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/fever.jpg" class="img-fluid" alt="Fever Fudge">
                                </a>
                                <h4 class="product-name">Fever Fudge</h4>
                            </div>
                        </div>

But when I log to the console I get all 6 the products. Below is my console.log result.

<div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/puking.jpg" class="img-fluid" alt="Puking Pastilles">
                                </a>
                                <h4 class="product-name">Puking Pastilles</h4>
                            </div>
                        </div>
product.js:22 <div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/nosebleed.jpg" class="img-fluid" alt="Nose-bleed Nougat">
                                </a>
                                <h4 class="product-name">Nose-bleed Nougat</h4>
                            </div>
                        </div>
product.js:22 <div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/fireworks.jpg" class="img-fluid" alt="Weasley's Wildfire Whiz Bangs">
                                </a>
                                <h4 class="product-name">Weasley's Wildfire Whiz Bangs</h4>
                            </div>
                        </div>
product.js:22 <div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/extendible.jpg" class="img-fluid" alt="Extendable Ears">
                                </a>
                                <h4 class="product-name">Extendable Ears</h4>
                            </div>
                        </div>
product.js:22 <div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/snackbox.jpg" class="img-fluid" alt="Complete Skiving Snackbox">
                                </a>
                                <h4 class="product-name">Complete Skiving Snackbox</h4>
                            </div>
                        </div>
product.js:22 <div class="col-md-4 col-sm-12">
                            <div class="shop-list">
                                <a class="product-image" href="../shop/product-detail.php">
                                    <img src="../images/shops/fever.jpg" class="img-fluid" alt="Fever Fudge">
                                </a>
                                <h4 class="product-name">Fever Fudge</h4>
                            </div>
                        </div>

Why?

1 Answer

Steven Parker
Steven Parker
231,141 Points
Steven Parker
Steven Parker
231,141 Points

The assignment operation "row.innerHTML = ..." replaces the text already in the element, so only what is done last will be seen. On the other hand, anything logged to the console remains and additional log statements will appear after it.

You could add to the element instead of replacing by using a different operator :point_right: row.innerHTML += ...