Fetching User Data - paradiddle97/web-app-from-scratch-2324 GitHub Wiki
With the team we decided to use our name, age, avatar and our Github, Discord and linkedIn socials as data for the team website. This also had to be the user data on my personal website, but just in case we would decide to add more data to the team website I made a Json file with all the data I could think of.
{
"name": "Niels Aling",
"age": 26,
"country": "Netherlands",
"languages": [
"Dutch",
"English"
],
"education": [
{
"school": "Hogeschool Rotterdam",
"degree": "Bachelor of Science",
"field": "Communication and Multimedia Design"
}
],
"work": [
{
"company": "aardig",
"position": "Front-end Developer",
"duration": "2023 - Present"
}
],
"programming languages": [
"Python",
"JavaScript",
"HTML",
"CSS",
"C++"
],
"tools": [
"VSCode",
"Git",
"GitHub",
"Node.js",
"MongoDB",
"React",
"Express",
"Next.js",
"Figma",
"Adobe CC",
"Miro",
"Webflow"
],
"hobbies": [
"Coding",
"Gaming",
"Watching Anime",
"Drumming"
],
"socials": [
{
"github": "https://github.com/N13L5A97",
"linkedIn": "https://www.linkedin.com/in/niels-aling/",
"discord": "http://discordapp.com/users/767661823855034368"
}
],
"images": [
{
"transparent": "https://raw.githubusercontent.com/N13L5A97/web-app-from-scratch-2324/main/public/assets/images/avatar_transparent.png",
"black": "https://raw.githubusercontent.com/N13L5A97/web-app-from-scratch-2324/main/public/assets/images/avatar_black.png"
}
]
}On the server side I created a function to fetch this data and send this to the homepage. For now I only use my name, age, work position, avatar and socials.
// home
app.get("/", async function (req, res) {
const userData = await fetchUserData();
const userImage = userData.images[0].black;
const userSocials = userData.socials;
console.log(userData);
res.render("pages/index", { userData, userImage, userSocials });
});
const fetchUserData = async () => {
try{
const data = fs.readFileSync("data.json", "utf8");
userData = JSON.parse(data);
return userData;
} catch (error) {
console.error(error);
}
};After sending it to the front-end I could implement it in the place I wanted it. In this case the title of the page (my name and age), my work position and my avatar.
<section class="userInfo">
<img src="<%= userImage %>" class="avatar" alt="avatar">
<section>
<h1><%= userData.name %> <span>(<%= userData.age %>)</span> </h1>
<p> <%= userData.work[0].position %> </p>
</section>
</section>In the end it looked like this:
I found out this was not necessary to do this on a server, so I changed the function and made every element that I needed with javascript into the page.
const fetchUserData = async () => {
const userData = await fetch ("./assets/data/data.json");
const userDataJson = await userData.json();
return userDataJson;
};
const createUserElements = async () => {
const userData = await fetchUserData();
console.log(userData.bio);
const userAge = document.createElement('span');
userAge.innerHTML = "(" + userData.age + ")";
const userName = document.createElement('h3');
userName.innerHTML = userData.firstName + " " + userData.lastName + " " + userAge.outerHTML;
const avatar = document.createElement('img');
avatar.src = userData.avatar_url;
avatar.alt = userData.firstName;
const userPosition = document.createElement('p');
userPosition.innerHTML = userData.work[0].position;
const dataContainer = document.querySelector('.userData');
const bio = document.createElement('p');
bio.innerHTML = userData.bio;
dataContainer.appendChild(avatar);
dataContainer.appendChild(userName);
dataContainer.appendChild(userPosition);
const bioContainer = document.querySelector('.bio');
bioContainer.appendChild(bio);
};I thought of adding content to the socials page but found it more logical to move the social links to the footer. These links were still fetch on the server side so I also changed that. I think the footer looks way better this way.
The data was still fetched on the server side so I had to fix that as well. I had some trouble with this because the console.log kept saying "Cannot set properties of null (setting 'href') at insertSocialLinks".
const insertSocialLinks = async () => {
const userData = await fetchUserData();
console.log(userData.socials[0].github);
const github = document.getElementById('#github');
const linkedin = document.getElementById('#linkedin');
const discord = document.getElementById('#discord');
github.href = userData.socials[0].github;
linkedin.href = userData.social[0].linkedin;
discord.href = userData.social[0].discord;
}Since it would be logical to only show the icons in the footer if the links are found I decided to create them all in Javascript.
const insertSocialLinks = async () => {
const userData = await fetchUserData();
console.log(userData.socials[0].linkedIn);
//create a link for github
const github = document.createElement('a');
github.href = userData.socials[0].github;
const githubIcon = document.createElement('img');
githubIcon.src = "./assets/icons/github_logo.svg";
githubIcon.alt = "Github";
github.appendChild(githubIcon);
//create a link for linkedin
const linkedin = document.createElement('a');
linkedin.href = userData.socials[0].linkedIn;
const linkedinIcon = document.createElement('img');
linkedinIcon.src = "./assets/icons/linkedin_logo.svg";
linkedinIcon.alt = "Linkedin";
linkedin.appendChild(linkedinIcon);
// create a link for discord
const discord = document.createElement('a');
discord.href = userData.socials[0].discord;
const discordIcon = document.createElement('img');
discordIcon.src = "./assets/icons/discord_logo.svg";
discordIcon.alt = "Discord";
discord.appendChild(discordIcon);
const socialsSection = document.querySelector('.socials');
socialsSection.appendChild(github);
socialsSection.appendChild(linkedin);
socialsSection.appendChild(discord);
}