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

Posted by Alfred Wing
Alfred Wing
1,855 Points

So my code appears to do what they are doing...but is it bad practice to code it the way I did?

function petFunction (arr) {
    let petProfile = '';
    for (let i = 0; i < arr.length; i++) {
        petProfile += `
            <h2>${arr[i]['name']}</h2>
            <h3>${arr[i]['type']} | ${arr[i]['breed']}</h3
            <p>Age: ${arr[i]['age']}</p>
            <img src="${arr[i]['photo']}" alt="${arr[i]['breed']}">
        `;
    }
    return petProfile
}

const petList =  [
    {
        name: 'Titan', 
        type: 'Dog', 
        breed: 'Australian Shepherd', 
        age: 'Deceased, Lived 145 years.', 
        photo: 'img/aussie.jpg', 
    },
    {
        name: 'Sunny', 
        type: 'Dog', 
        breed: 'Dachshund', 
        age: '12', 
        photo: 'img/dachshun.jpg', 
    },
    {
        name: 'Rainy', 
        type: 'Dog', 
        breed: 'Golden Boyo', 
        age: '2', 
        photo: 'img/golden.jpg', 
    },
    {
        name: 'Stormy', 
        type: 'Cat', 
        breed: 'Persian', 
        age: '3', 
        photo: 'img/persian.jpg', 
    },
    {
        name: 'Clicky', 
        type: 'Dog', 
        breed: 'Pug (Please stop breeding this unholy creatures.)', 
        age: '4', 
        photo: 'img/pug.jpg', 
    },
    {
        name: 'Ahri', 
        type: 'Best Cat', 
        breed: 'Siamese', 
        age: '5', 
        photo: 'img/tabby.jpg', 
    },
]

document.querySelector('main').innerHTML =  `
        ${petFunction(petList)}

`;
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Do you have a link to the video you are referring to?

There is a few things I would change to make it more readable in general, but not sure if have covered these topics yet so don't want to overload you as you will get to them :D

2 Answers

Alfred Wing
Alfred Wing
1,855 Points
Alfred Wing
Alfred Wing
1,855 Points

Totally makes sense. I'm on editing the DOM now in the fullstack js track right now but this was the video:

https://teamtreehouse.com/library/display-an-array-of-objects-on-the-page-one-solution

The biggest thing I was wondering was that they created an html variable to store the output in and then used a template literal to call the variable in the document.query stuff.

Thinking about it now though it would probably be better to do that so I don't have to rewrite the document. section everytime?

martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Yes, I just finished watching the video, I would personally also assign main to a variable as well for the reasons you stated.

Also, the only other thing I would change is that you are already returning the petProfile HTML as a string from the function you created, so you should not need to use template literal later on, instead you can just invoke the function as shown in the code example below.

So taking in to account what you have learned so far, these are the changes I would recommend:

const main = document.querySelector('main');

function petFunction (arr) {
    let petProfile = '';
    for (let i = 0; i < arr.length; i++) {
        petProfile += `
            <h2>${arr[i]['name']}</h2>
            <h3>${arr[i]['type']} | ${arr[i]['breed']}</h3
            <p>Age: ${arr[i]['age']}</p>
            <img src="${arr[i]['photo']}" alt="${arr[i]['breed']}">
        `;
    }
    return petProfile
}

const petList =  [
    {
        name: 'Titan', 
        type: 'Dog', 
        breed: 'Australian Shepherd', 
        age: 'Deceased, Lived 145 years.', 
        photo: 'img/aussie.jpg', 
    },
...
]

main.innerHTML = petFunction(petList);
Alfred Wing
Alfred Wing
1,855 Points
Alfred Wing
Alfred Wing
1,855 Points

Awesome! Thanks for the response!