Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

I’m failing tests 21-24 concerning the avatars function, and don’t understand why. I console logged the string formed with all the img tags, and it looks to me like what the user story and test feedback is describing — I must be missing something though.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* console feedback */
[Log] <img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/QuincyLarson_30.png" alt="Quincy Larson"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/JOY-OKORO_30.png" alt="Joy Okoro"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/nickrg_30.png" alt="Nicolas Greenwood"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/MrSanyi_30.png" alt="SanyiDiriba"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/nstrickland2014_30.png" alt="Nstrickland2014"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/ZigglerPL_30.png" alt="Ziggler Pl"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Jago971_30.png" alt="Matt"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/jgurpdev_30.png" alt=""><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/vitorio.paulo_30.png" alt="Vitório Paulo"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/zuhameer6_30.png" alt="Zuhaira Ameer"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/kskaman_30.png" alt="Kamanpreet Singh"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/bananapana_30.png" alt=""><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Evilaina_30.png" alt="Ewelina"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/1382rodrigo_30.png" alt="1382rodrigo"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/caue.souzapl_30.png" alt="Cauê Souza"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Suchansinee-nice_30.png" alt="Suchansinee Lipikaporn"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/alveseduardofeitosa_30.png" alt="Alveseduardofeitosa"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/JuniorQ_30.png" alt="Arakhsh Qanit"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/sergio.am.spina_30.png" alt="Sergio Spina"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/bbsmooth_30.png" alt="Bruce B"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/jwilkins.oboe_30.png" alt="Jessica Wilkins"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Katereverie_30.png" alt="Katereverie"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/vertebraofficial01_30.png" alt="Glo"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/pkdvalis_30.png" alt="pkdvalis"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/akeruzimuzo_30.png" alt="Akeruzimuzo"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/igorgetmeabrain_30.png" alt="Doug Badger"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Black_RAM_30.png" alt="Robert Topaz"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/bappyasif_30.png" alt="a b"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/gillis_30.png" alt="Gillis"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/angelika43_30.png" alt="A"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/jjcodenet_30.png" alt="qbts load"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Amirkat_30.png" alt="amir"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/DanCouper_30.png" alt="Dan Couper"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/coderostro_30.png" alt="Coderostro"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/GeorgeCrisan_30.png" alt="George Crisan"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/jamienyc_30.png" alt="Jamie"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/lasjorg_30.png" alt="Lasse"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/brennan.ting_30.png" alt="Brennan Ting"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Debasisdba_30.png" alt="Debasis"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/DanielHuebschmann_30.png" alt=""><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/lucianaruelli2_30.png" alt="Lucianaruelli2"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/stephenmutheu_30.png" alt="Stephen Mutheu"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/lanavape_30.png" alt="King"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Maxcrom_30.png" alt=""><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/sanity_30.png" alt="or not"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/quechau143_30.png" alt="Quechau143"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/chiebukabonaventure_30.png" alt="chiebuka bonaventure"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Ray13_30.png" alt="Raymond"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/mamadou.faye44_30.png" alt="Mamadou FAYE"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/hasanzaib1389_30.png" alt="Hassan Zaib"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/ilenia_30.png" alt="Ilenia"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/Teller_30.png" alt=""><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/litiema_30.png" alt="altontonnalumasa@gmail.com"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/moT01_30.png" alt="Tom M"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/devuktm966_30.png" alt="Adithya Sankar"><img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/sailyhurtado_30.png" alt="Saily Hurtado Gracia"> (about:srcdoc, line 290)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15 Ddg/26.2

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

Please update your post to include your full code.

Happy coding

3 
const forumLatest =
  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
const avatarUrl = 'https://cdn.freecodecamp.org/curriculum/forum-latest';

const allCategories = {
  299: { category: 'Career Advice', className: 'career' },
  409: { category: 'Project Feedback', className: 'feedback' },
  417: { category: 'freeCodeCamp Support', className: 'support' },
  421: { category: 'JavaScript', className: 'javascript' },
  423: { category: 'HTML - CSS', className: 'html-css' },
  424: { category: 'Python', className: 'python' },
  432: { category: 'You Can Do This!', className: 'motivation' },
  560: { category: 'Backend Development', className: 'backend' }
};

function timeAgo(timeStamp) {
  const currentTime = new Date();
  const pastTime = new Date(timeStamp);
  
  const differenceInMS = currentTime - pastTime;
  const differenceInSeconds = Math.floor(differenceInMS / 1000);
  const differenceInMinutes = Math.floor(differenceInSeconds / 60);
  const differenceInHours = Math.floor(differenceInMinutes / 60);
  const differenceInDays = Math.floor(differenceInHours / 24);

  if (differenceInMinutes < 60) {
    return `${differenceInMinutes}m ago`;
  } else if (differenceInHours < 24) {
    return `${differenceInHours}h ago`;
  } else {return `${differenceInDays}d ago`}
};

function viewCount(numberOfViews) {
  if (numberOfViews >= 1000) {
    return `${Math.floor(numberOfViews / 1000)}k`
  } else {return numberOfViews};
}

function forumCategory(categoryId) {
  if (categoryId in allCategories) {
    const { category, className } = allCategories[categoryId];
    console.log(`Category ID: ${categoryId}, Category: ${category}, Class Name: ${className}`);
    return `<a class="category ${className}" href="${forumCategoryUrl}${className}/${categoryId}">${category}</a>`
  }
  else {
    return `<a class="category general" href="${forumCategoryUrl}general/${categoryId}">General</a>`
        }
}

function avatars(uniquePosterIds, userPropertiesArray) {
    const imgElements = [];
    let imgString = '';

    uniquePosterIds.forEach(posterId => {
        const user = userPropertiesArray.find(user => user.id === posterId);
        if (user) {
            const avatarUrlWithSize = user.avatar_template.replace('{size}', '30');
            const src = avatarUrlWithSize.startsWith('http') ? avatarUrlWithSize : `${avatarUrl}${avatarUrlWithSize}`;
            const altText = user.name ? user.name : '';
            const imgElement = `<img src="${src}" alt="${altText}">`;
            imgElements.push(imgElement);
        imgString = imgElements.join('');
        }
    });
    console.log(imgString);
    return imgElements.join('');
}

async function fetchData() {
  try {
    let response = await fetch(`${forumLatest}`)
    let userData = await response.json()

    console.dir(userData);
    console.log(Object.keys(userData))

    const posterUserIds = [];
    const topics = userData.topic_list.topics;

    for (let i = 0; i < topics.length; i++) {
        const posters = topics[i].posters;
        for (let j = 0; j < posters.length; j++) {
            const userId = posters[j].user_id;
            posterUserIds.push(userId);
            }
        }
    const uniquePosterIds = [...new Set(posterUserIds)];
        
    const usersArray = userData.users;
    const userPropertiesArray = usersArray.map(user => ({
        id: user.id,
        name: user.name,
        avatar_template: user.avatar_template
        }));
    const avatarImages = avatars(uniquePosterIds, userPropertiesArray);

    } catch (error){
        console.log("Error fetching user data:", error)
    }
}
fetchData();
4

here an example of the values the two parameters of avatars get, your code can’t deal with them:

uniquePosterIds = [
        {
            "user_id": 6
        },
        {
            "user_id": 285941
        },
        {
            "user_id": 170865
        }
    ];
userPropertiesArray = [
        {
            "avatar_template": "/user_avatar/QuincyLarson_{size}.png",
            "id": 6,
            "name": "Quincy Larson",
            "username": "QuincyLarson"
        },
        {
            "avatar_template": "/user_avatar/jwilkins.oboe_{size}.png",
            "id": 285941,
            "name": "Jessica Wilkins",
            "username": "jwilkins.oboe"
        },
        {
            "avatar_template": "/user_avatar/ilenia_{size}.png",
            "id": 170865,
            "name": "Ilenia",
            "username": "ilenia"
        },
        {
            "id": 20
        }
    ];
5

Thanks for the reply.

I’m probably being dense, but I don’t understand your comment, and can’t match your output. I did an array.forEach on 3 arrays (uniquePosterIds, userPropertiesArray, and imgElements); I see the same output for uniquePosterIds, but in userPropertiesArray, I don’t see an entry with just an id of 20. And imgElements has the same number of elements as both the other two, each one being of the form:

[Log] <img src="https://cdn.freecodecamp.org/curriculum/forum-latest/user_avatar/QuincyLarson_30.png" alt="Quincy Larson"> (about:srcdoc, line 289)

So I’m still confused :face_without_mouth: Can you say a little more about your output and what I should glean from it?

6

So you are iterating on each element of uniquePosterIds

What is the first element? What does it look like? Log it to the console.

What’s the first element of this array? Is it a poster id? What data type is it?

7

Yes, I did the iteration on uniquePosterIds, logging the value and the typeof — they’re all type “number.” I see the one with user_id = 6, but I didn’t assume that because it wasn’t the same length as the other ids that it was invalid, especially because it matches a user_id in the posters data. There are 2 or 3 others that are shorter than the majority — should I be testing for the length of the user_id and excluding those that don’t meet the “standard”?

    uniquePosterIds.forEach(id => {
      console.log(id, typeof(id));
    })

[Log] 6 – "number" (about:srcdoc, line 414)
[Log] 576147 – "number" (about:srcdoc, line 414)
[Log] 562668 – "number" (about:srcdoc, line 414)

Thanks for continuing to engage on this with me.

8

you are not using the sample input I gave you, the avatars function is not receiving an array of numbers

the sample input I gave you is what the function must work with

9

Thank you. I rewrote the creation of uniquePosterIds so that it’s an array of objects. Rereading the user story, I see this sentence:

Find the img URL by looking up the user_id property in the posters array and find the matching id property in the users array.

implies that the array of posters is an array of objects, right?

10

Yes exactly, from the word “property”

1 Like