Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

User Story: 14.The showLatestPosts should extract the users and topic_list properties from the object passed as argument.

although i succeed fetched the data but i donno how to access users and topics i tried bracket notation [] and dot notation but i did not succeed get it , any hint please . thank you

Your code so far

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


/* file: styles.css */


/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
3 
const postsContainer = document.getElementById('posts-container');
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' }
};

// timeAgo function
const timeAgo = (arg) => {
    // now date
    let nowDate = new Date().getTime()

    let passedDate = new Date(arg).getTime()
    let diffDate = nowDate - passedDate

    let diffDays = Math.floor(diffDate / (24 * 60 * 60 * 1000))

    let diffHours = Math.floor(diffDate % (24 * 60 * 60 * 1000) / (60 * 60 * 1000))

    let diffMins =  Math.abs(Math.floor(diffDate % (24 * 60 * 60 * 1000) / (60 * 1000)))


    if(diffDays >= 1) {
      return diffDays + 'd ago'
    }
    if(diffDays < 1 && diffHours >= 1) {
      return diffHours + 'h ago'
    }
    if(diffDays < 1 && diffHours < 1) {
      return diffMins + 'm ago'
    }
}

const viewCount = (views) => {
  if(views === 1000) {
    return '1k'
  }
  if(views >= 2000) {
    return '2k'
  }
  return views
}

const forumCategory = (category) => {
  let obj = allCategories[category]
  if(!obj) {
    return `<a id='${category}' class='category general' href="${forumCategoryUrl + 'general' + '/' + category}">General</a>`
  }

  return `<a id='${category}' class='category ${obj.className}' href="${forumCategoryUrl + obj.className + '/' + category}">${obj.category}</a>`
}

const avatars = (posters, users) => {
    return posters.map(poster => {
    const user = users.find(user => user.id === poster.user_id);

    if (!user) return '';
    const avatarPath = user.avatar_template.replace('{size}', 30);
    const userAvatarUrl = avatarPath.startsWith('/')
      ? `${avatarUrl}${avatarPath}`
      : avatarPath; 
    return `<img src='${userAvatarUrl}' alt='${user.name}'>`;
  }).join('');
}

const showLatestPosts = (users) => {
  return users
  
}
 
async function fetchData() {
  try {

  const response = await fetch(forumLatest)
  const data = await response.json()
     console.log(data)
  }catch(err) {
    console.log(`${err}`)
  }
}
console.log(showLatestPosts(fetchData()))

here is my full code

4

Open up your browser’s console to see the data that you have logged.

image

Expand it by clicking the > arrow.

image
image1135×176 11 KB

Now expand topic_list and users.

image
image870×326 26.1 KB

Now you can see the data you’re working with and the type of structure data returns.

Hope that helps.

1 Like
5

yes i see, the browser console is more organizing and clear showing the data, despite that i don’t know how to extract those users and topic list data

6

They are just arrays of objects. I think you’ve worked with those before, haven’t you?

7

yes, should i extract it in showLatestPosts function ?!

8

i try to save it in scoped variables in the showLatestPost function but when i log it i can’t see if it works or not

9

show your code

always show your code

10 
const postsContainer = document.getElementById('posts-container');
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' }
};

// timeAgo function
const timeAgo = (arg) => {
    // now date
    let nowDate = new Date().getTime()

    let passedDate = new Date(arg).getTime()
    let diffDate = nowDate - passedDate

    let diffDays = Math.floor(diffDate / (24 * 60 * 60 * 1000))

    let diffHours = Math.floor(diffDate % (24 * 60 * 60 * 1000) / (60 * 60 * 1000))

    let diffMins =  Math.abs(Math.floor(diffDate % (24 * 60 * 60 * 1000) / (60 * 1000)))


    if(diffDays >= 1) {
      return diffDays + 'd ago'
    }
    if(diffDays < 1 && diffHours >= 1) {
      return diffHours + 'h ago'
    }
    if(diffDays < 1 && diffHours < 1) {
      return diffMins + 'm ago'
    }


}

const viewCount = (views) => {
  if(views === 1000) {
    return '1k'
  }
  if(views >= 2000) {
    return '2k'
  }
  return views
}

const forumCategory = (category) => {
  let obj = allCategories[category]
  if(!obj) {
    return `<a id='${category}' class='category general' href="${forumCategoryUrl + 'general' + '/' + category}">General</a>`
  }

  return `<a id='${category}' class='category ${obj.className}' href="${forumCategoryUrl + obj.className + '/' + category}">${obj.category}</a>`
}

const avatars = (posters, users) => {
    return posters.map(poster => {
    const user = users.find(user => user.id === poster.user_id);

    if (!user) return '';
    const avatarPath = user.avatar_template.replace('{size}', 30);
    const userAvatarUrl = avatarPath.startsWith('/')
      ? `${avatarUrl}${avatarPath}`
      : avatarPath; 
    return `<img src='${userAvatarUrl}' alt='${user.name}'>`;
  }).join('');
}

const showLatestPosts = (arg) => {
  const users = arg.users
  console.log(users)
}
 
async function fetchData() {
  try {

  const response = await fetch(forumLatest)
  const data = await response.json()
     console.log(data)
  }catch(err) {
    console.log(`${err}`)
  }
}


console.log(showLatestPosts(fetchData()))
11

Where is arg coming from?

12

thanks very much, i made a big mistake and you gave me the chance to discover it myself.

13

i’ve made the magic, you know it’s like a magic.
i wasn’t know that i can do something like that before :slight_smile:

1 Like