Question posted in 
const initial = [
{ name: "Alice", price: 30, occupation: "Writer" },
{ name: "Bob", price: 50, occupation: "Teacher"}
]
const extraFreelancers = [
{ name: "Dr. Slice", price: 25, occupation: "Gardener" },
{ name: "Dr. Pressure", price: 51, occupation: "Programmer" },
{ name: "Prof. Possibility", price: 43, occupation: "Teacher" },
{ name: "Prof. Prism", price: 81, occupation: "Teacher" },
{ name: "Dr. Impulse", price: 43, occupation: "Teacher" },
{ name: "Prof. Spark", price: 76, occupation: "Programmer" },
{ name: "Dr. Wire", price: 47, occupation: "Teacher" },
{ name: "Prof. Goose", price: 72, occupation: "Driver" },
];
const maxLancers = 5;
render();
const addFreelancerInterval = setInterval(addFreelancer, 5000);
function render() {
const container = document.querySelector(".container")
for(let i = 0; i < initial.length; i++){
const usersBox = document.createElement("div")
usersBox.className = "usersBox"
const name = document.createElement("p")
const price = document.createElement("p")
const occ = document.createElement("p")
name.innerText = `${initial[i].name}`
price.innerText = `$${initial[i].price}`
occ.innerText = `${initial[i].occupation}`
usersBox.appendChild(name)
usersBox.appendChild(price)
usersBox.appendChild(occ)
container.appendChild(usersBox)
}
}
function addFreelancer() {
const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
initial.push(freelancer);
render();
if (initial.length >= maxLancers) {
clearInterval(addFreelancerInterval);
}
averageStartingPrice();
}
const avg = document.createElement("p")
avg.className = "avg"
avg.innerText = `${averageStartingPrice()}`;
function averageStartingPrice() {
const totalStartingPrice = initial.reduce((acc, freelancer) => acc += freelancer.price, 0);
return totalStartingPrice / initial.length;
}html {
background-color: white;
}
body {
background-color: white;
height: 100vh;
width: 100%;
margin: 0;
}
.usersBox{
display: flex;
border-bottom: 2px solid black;
text-align: center;
font-size: 30px;
padding: 10px;
height: 100px;
justify-content: center;
align-items: center;
justify-content: space-between;
width: 1000px;
}
#box {
margin: auto;
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
align-items: center;
border: 5px solid black;
margin:100px;
padding: 0px;
}
p {
text-align: center;
margin: auto;
}
#title {
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
padding: 10px;
height: 200px;
width: 1000px;
flex-direction: column;
}
h1 {
margin: 10px;
}
h2 {
margin: 10px;
margin-bottom: 20px;
}
#lists{
justify-content: space-between;
display: flex;
}
h3 {
margin: 110px;
margin-top: 0px;
margin-bottom: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freelancer Forum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
<div id="title">
<h1>Freelancer Forum</h1>
<p class="avg">The average starting price is
</p>
<h2>Available Freelancers: </h2>
<div id="lists">
<h3>Name</h3>
<h3>Price</h3>
<h3>Occupation</h3>
</div>
</div>
<div class="container">
</div>
</div>
<script src="script.js"></script>
</body>
</html>I have created two functions to display an array of objects onto an HTML page.
function render() {
const container = document.querySelector(".container")
for(let i = 0; i < initial.length; i++){
const usersBox = document.createElement("div")
usersBox.className = "usersBox"
const name = document.createElement("p")
const price = document.createElement("p")
const occ = document.createElement("p")
name.innerText = `${initial[i].name}`
price.innerText = `$${initial[i].price}`
occ.innerText = `${initial[i].occupation}`
usersBox.appendChild(name)
usersBox.appendChild(price)
usersBox.appendChild(occ)
container.appendChild(usersBox)
}
}
The above function to display the array onto HTML.
function addFreelancer() {
const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
initial.push(freelancer);
render();
if (initial.length >= maxLancers) {
clearInterval(addFreelancerInterval);
}
averageStartingPrice();
}
And this function to add objects from another array to the initial array.
For some reason, the output on the HTML page is iterating the same initial array over and over again instead of just adding the new objects to the list. Below is a screenshot of what the output looks like (note the repeated "Alice" and "Bob" objects, which are the initial array).
I really have no idea where the issue is. I am very new to JavaScript and HTML so I apologize if it is something simple that was overlooked. Any help is greatly appreciated!
(https://github.com/antjuh/Unit2.FreelancerForum.git) GitHub for anyone interested in further details.
EDIT: Apologies, I have added JavaScript, HTML, and CSS to the post for easy access.
2
Answers
The problem is that you are repeating the same initial list, which has the same people. Thus it will repeat the same person again.
So what I did is add a variable that whenever the render runs it sets it to the length of the initial list, so when the something is added to the list it doesn’t repeat the same people again.
AS i understand, your problem is why "Alice" and "Bob" are repeated in result?
Let’s go through code:
initial index.html Page Load
render();function will exeute and display becauseinitialarray has 2 items "Alice" and "Bob"After 5s interval
addFreelancerfunction is called. it will randomly pick any element fromextraFreelancersarray And add this element toinitialarrayinitial.push(freelancer);now
initialarray has 3 items.render();will display these three items.but you are not removing the already displayed items in step 1. now every time you will call render old elements and newly add element will display again and again.