Build an fCC Forum Leaderboard

JavaScript
1 
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://sea1.discourse-cdn.com/freecodecamp';

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' }
};

const timeAgo = (passedTimeIso) => {
  const currentTime = new Date()
  const passedTime = new Date(passedTimeIso)
  const resultMin = Math.floor((currentTime - passedTime) / 60000)
  const resultHour = Math.floor(resultMin / 60)
  const resultDay = Math.floor(resultHour / 24)
  if(resultMin < 60){
    return `${resultMin}m ago`
} else if(resultHour < 24){
    return `${resultHour}h ago`
} else {
  return `${resultDay}d ago`
}
}

const viewCount = postViews => {
  if(postViews >= 1000){
    return `${Math.floor(postViews / 1000)}k`
  } else {
    return postViews
  }
}

const forumCategory = id => {
if (allCategories[id]){
  return `<a href='${forumCategoryUrl}${allCategories[id].className}/${id}' class='category ${allCategories[id].className}'>${allCategories[id].category}</a>`
} else {
  return `<a href='${forumCategoryUrl}general/${id}'>General</a>`
}
}
//console.log(forumCategory(200))

const avatars = (posters, users) => {
  const str = ``
 const result = users.filter(item => {
   posters.forEach(poster => {
     item.id === poster.user_id
   })
 })
 result.forEach(item => {
str += `<img>`
 })
 return str
}
  1. The avatars function should return a string made by joining img elements, one for each poster found inside the user array. Hint: You can find users by comparing the user_id property of the poster with the id property` of the user.

Cant figure this out. Not sure how to debug, i dont have any arrays to put into the avatars function.

2

Hi, kindly include a link to this challenge.

3

hi.

4

You also provided only your JS code, we need to see your HTML, and CSS if their is any.

5

you can get the arrays from the fetched data. If you read the following user stories you will also know where in the fetched data to get them

1 Like
6

there isnt any html or css i had to do. Thanks

1 Like
7

Yes i see the fetch in the last step of the user stories

8

so i should fetch the data and save it and test it in the avatars function?

9 
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://sea1.discourse-cdn.com/freecodecamp';

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' }
};

const timeAgo = (passedTimeIso) => {
  const currentTime = new Date()
  const passedTime = new Date(passedTimeIso)
  const resultMin = Math.floor((currentTime - passedTime) / 60000)
  const resultHour = Math.floor(resultMin / 60)
  const resultDay = Math.floor(resultHour / 24)
  if(resultMin < 60){
    return `${resultMin}m ago`
} else if(resultHour < 24){
    return `${resultHour}h ago`
} else {
  return `${resultDay}d ago`
}
}

const viewCount = postViews => {
  if(postViews >= 1000){
    return `${Math.floor(postViews / 1000)}k`
  } else {
    return postViews
  }
}

const forumCategory = id => {
if (allCategories[id]){
  return `<a href='${forumCategoryUrl}${allCategories[id].className}/${id}' class='category ${allCategories[id].className}'>${allCategories[id].category}</a>`
} else {
  return `<a href='${forumCategoryUrl}general/${id}' >General</a>`
}
}
//console.log(forumCategory(200))

const avatars = (posters, users) => {
  let str = ``
const postersArr = posters.map(poster => {
  return users.filter(user => user.id === poster.user_id)
})
postersArr.forEach(item => {
  let src = item.avatar_template.replace('{size}', 30)
str += `<img src='${src}' alt='${item.name}'>`
})
return str
}

async function fetchData() {
  try {
    let response = await fetch(`${forumLatest}`)
    let userData = await response.json()
    console.log(userData.users)
  } catch (error){
    console.log("Error fetching user data:", error)
  }
}
fetchData()

const avatars = (posters, users) => {
  let str = ``
const postersArr = posters.map(poster => {
  return users.filter(user => user.id === poster.user_id)
})
postersArr.forEach(item => {
  let src = item.avatar_template.replace('{size}', 30)
str += `<img src='${src}' alt='${item.name}'>`
})
return str
}

Hello, the avatars function isn’t working.
Step 10 wont pass.
The avatars function should set each avatar’s size by accessing the avatar_template property and replacing {size} with 30.

10

Open the console.

TypeError: Cannot read properties of undefined (reading ‘replace’)

Log out what item is, inside your forEach loop.