试图找出如何添加这个javascript

Question

所以我想创建一个订单列表并对其实现搜索功能但我甚至不知道基本的东西，就像现在它只是在html上未定义的垃圾，即使"orderid"是json文件上的对象。这真的很难弄清楚，当我问别人的时候，人们给我的信息太直接了，我不明白我不是要求你们为我编码，而是指出正确的方向会有帮助

const orderlist = document.getElementById('orderlist');
let orderid = [0];
const loadorders = async() => {
try {
const res = await fetch('https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py');
orderid = await res.json();
displayorderid(orderid);
} catch (err) {
console.error(err);
console.log(res);
}
};
const displayorderid = (orderid) => {
const htmlString = orderid
.map((order) => {
return `
<li class="orderid">
<h2>${order.value}</h2>
</li>
`;
})
.join('');
orderlist.innerHTML = htmlString;
};
loadorders();

body {
font-family: Georgia, serif;
background-color: rgb(59, 59, 243);
}
* {
box-sizing: border-box;
}
h1 {
color: azure margin-bottom:30px;
}
.container {
padding: 35px;
margin: 0 auto;
max-width: 1000px;
text-align: center center;
}
#customerslist {
padding-inline-start: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 15;
}
.Customer {
list-style-type: none;
background-color: aquamarine;
border-radius: 5px;
padding: 10px 25px;
grid-template-columns: 3fr 1fr;
grid-template-areas: ;
text-align: left;
}

<div class="container">
<h1>tilaukset</h1>
<div id="search">
<input type="text" name="Hakupalkki" id="Hakupalkki" placeholder="Hae tilausta" />
</div>
<ul id="orderlist"></ul>
</div>

Answer 1

下面是一个工作代码片段。正如Kinglish(在评论中)所提到的，问题是你正在循环的对象中没有值属性，它应该说customerid。

const orderlist = document.getElementById('orderlist');
let orderid = [0];
const loadorders = async() => {
try {
const res = await fetch('https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py');
orderid = await res.json();
displayorderid(orderid);
} catch (err) {
console.error(err);
console.log(res);
}
};
const displayorderid = (orderObject) => {
const htmlString = orderObject
.map((orderObject) => {
return `
<li class="orderid">
<h2>${orderObject.customerid}</h2>
</li>
`; //<------- the customerid property exists
})
.join('');
orderlist.innerHTML = htmlString;
};
loadorders();

body {
font-family: Georgia, serif;
background-color: rgb(59, 59, 243);
}
* {
box-sizing: border-box;
}
h1 {
color: azure margin-bottom:30px;
}
.container {
padding: 35px;
margin: 0 auto;
max-width: 1000px;
text-align: center center;
}
#customerslist {
padding-inline-start: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 15;
}
.Customer {
list-style-type: none;
background-color: aquamarine;
border-radius: 5px;
padding: 10px 25px;
grid-template-columns: 3fr 1fr;
grid-template-areas: ;
text-align: left;
}

<div class="container">
<h1>tilaukset</h1>
<div id="search">
<input type="text" name="Hakupalkki" id="Hakupalkki" placeholder="Hae tilausta" />
</div>
<ul id="orderlist"></ul>
</div>

Answer 2

数组中没有每个对象的value属性。例如:

const orderlist = document.getElementById('orderlist');
let orderid = [0];
const displayorderid = (orderid) => {
const htmlString = orderid
.map((orderid) => {
return `
<li class="orderid">
<h2>${orderid.customerid}</h2>
</li>
`; //<------- the customerid property exists
})
.join('');
orderlist.innerHTML = htmlString;
};
const loadorders = async () => {
try {
const res = await fetch(
'https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py'
);
orderid = await res.json();
console.log(orderid) //<------- use this to view the each object`s properties in the console
displayorderid(orderid);
} catch (err) {
console.error(err);
console.log(res);
}
};
loadorders();

希望对你有帮助。