为什么我的对象数组无法从 JavaScript 正确显示为 HTML？

问题描述 投票：0回答：1

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>

我创建了两个函数来将对象数组显示到 HTML 页面上。

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)
  }
}

上面的函数将数组显示到 HTML 上。

function addFreelancer() {
    const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
    initial.push(freelancer);
    render();
    

    if (initial.length >= maxLancers) {
      clearInterval(addFreelancerInterval);
    }
    averageStartingPrice();
}

这个函数将另一个数组中的对象添加到初始数组中。

由于某种原因，HTML 页面上的输出会一遍又一遍地迭代相同的初始数组，而不是仅仅将新对象添加到列表中。下面是输出的屏幕截图（注意重复的“Alice”和“Bob”对象，它们是初始数组）。

HTML DISPLAY

我真的不知道问题出在哪里。我对 JavaScript 和 HTML 非常陌生，所以如果有一些简单的事情被忽视了，我深表歉意。非常感谢任何帮助！

(https://github.com/antjuh/Unit2.FreelancerForum.git) GitHub，适合任何对更多详细信息感兴趣的人。

编辑：抱歉，我已在帖子中添加了 JavaScript、HTML 和 CSS，以便于访问。

javascript html arrays object dom
1个回答
0
投票

问题在于您正在重复相同的初始列表，其中包含相同的人员。因此它会再次重复同一个人。

所以我所做的是添加一个变量，每当渲染运行时，它都会将其设置为初始列表的长度，因此当将某些内容添加到列表中时，它不会再次重复相同的人。

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;

let initialListThingy = 0 // I don't know what to name this

render();


const addFreelancerInterval = setInterval(addFreelancer, 5000);



function render() {
    
    const container = document.querySelector(".container")
    

    for(i = initialListThingy; 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)
  }
  initialListThingy = initial.length
}


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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.