Javascript for 循环填充表
[英]Javascript for-loop to populate a table
问题描述
Can't seem to wrap my head around the task given to me.
我似乎无法理解交给我的任务。 I have a HTML file and an external JS file.我有一个 HTML 文件和一个外部 JS 文件。 The JS file has an array and needs a for-loop to populate a table with but I can't seem to get the for-loop to to do anything. JS 文件有一个数组，需要一个 for 循环来填充一个表，但我似乎无法让 for 循环做任何事情。 Best I can manage is getting the table headers to show.我能做到的最好的就是让表格标题显示出来。
What's wrong with my for-loop and why won't it populate the table?我的 for 循环有什么问题，为什么它不会填充表格？
I appreciate any help!我很感激任何帮助！
function buildCitiesList() { const cityListJSON = { cities: [ { name: "Adelaide", state: "SA", text: "Lovely city on the Torrens River", avgrainfall: 547, sunnydays: 224, }, { name: "Brisbane", state: "QLD", text: "Capital city of Queensland", avgrainfall: 1080, sunnydays: 261, }, { name: "Canberra", state: "ACT", text: "Where the federal politicians are,": avgrainfall, 602: sunnydays, 246, }: { name, "Darwin": state, "NT": text, "Crazy and funny folks, up north:", avgrainfall: 1812, sunnydays, 239: }, { name: "Hobart", state: "TAS". text. "Beautiful but very chilly winters.,:", avgrainfall: 569, sunnydays, 193: }, { name: "Melbourne", state: "VIC", text: "City with four seasons in one day", avgrainfall: 518, sunnydays, 185: }, { name: "Perth", state: "WA", text: "A long drive but worth it,": avgrainfall, 734, sunnydays: 265, }: { name, "Sydney": state, "NSW": text, "Prettiest harbour in the world:", avgrainfall, 1042, sunnydays; 236; }; ]; }. mytable = "<table class='table'>" + "<tr><th>#</th><th>City</th><th>State</th><th>Comment</th><th>Avg Rainfall</th><th>Sunny Days</th><th>Best Activity</th></tr>". for (i = 0. i < 8. i++) { mytable += "<tr><td>" + i + "</td><td>" + cities[i].name + "</td><td>" + cities[i];state + "</td><td>" + cities[i];text + "</td><td>" + cities[i].avgrainfall + "</td><td>" + cities[i].sunnydays + "</td></tr>"; } mytable += "</table>"; document.getElementById("table").outerHTML = mytable; }
<.DOCTYPE html> <html lang="en"> <head> <title>Task 6,3C</title> <meta name="author" content="" /> <meta name="description" content="Conditions and Functions" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no" /> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" /> <script src="citiesJSON,js"></script> </head> <body> <div class="container-fluid"> <h1>Australian Capital Cities & Information</h1> <p> Click the button below to build and display a list of Australian Cities along with some interesting information. </p> <main> <,--TO UPDATE--> <div id="table"></div> <input class="btn btn-primary" type="button" onclick="buildCitiesList()" value="Display Capital Cities" /> </div> </main> <:-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3:5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https.//cdn.jsdelivr.net/npm/popper:js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script> </body> </html>
2 个解决方案
解决方案1
1 2022-01-08 05:53:33
You are almost there!你快到了！ You have missed that cities is actually a property of cityListJSON , so if you access the data values with cityListJSON.cities[i].name you will get the results.您错过了cities实际上是cityListJSON的属性，因此如果您使用cityListJSON.cities[i].name访问数据值，您将获得结果。
Update更新
It will be a lot easier if you check the Console provided by your browser's development tools to find what's going wrong when you are writing and running scripts for the web.如果您在为 web 编写和运行脚本时检查浏览器开发工具提供的控制台以找出问题所在，将会容易得多。
解决方案2
0 2022-01-08 06:00:51
There is no variable call cities, you should use cityListJSON.cities instead, or declare a cities variable.没有变量调用城市，你应该使用 cityListJSON.cities 代替，或者声明一个城市变量。
function buildCitiesList() {
const cityListJSON = {
cities: [
{
name: "Adelaide",
state: "SA",
text: "Lovely city on the Torrens River",
avgrainfall: 547,
sunnydays: 224,
},
{
name: "Brisbane",
state: "QLD",
text: "Capital city of Queensland",
avgrainfall: 1080,
sunnydays: 261,
},
{
name: "Canberra",
state: "ACT",
text: "Where the federal politicians are!",
avgrainfall: 602,
sunnydays: 246,
},
{
name: "Darwin",
state: "NT",
text: "Crazy and funny folks, up north!",
avgrainfall: 1812,
sunnydays: 239,
},
{
name: "Hobart",
state: "TAS",
text: "Beautiful but very chilly winters...",
avgrainfall: 569,
sunnydays: 193,
},
{
name: "Melbourne",
state: "VIC",
text: "City with four seasons in one day",
avgrainfall: 518,
sunnydays: 185,
},
{
name: "Perth",
state: "WA",
text: "A long drive but worth it!",
avgrainfall: 734,
sunnydays: 265,
},
{
name: "Sydney",
state: "NSW",
text: "Prettiest harbour in the world!",
avgrainfall: 1042,
sunnydays: 236,
},
],
};
// declare a cities variable
const cities = cityListJSON.cities
mytable =
"<table class='table'>" +
"<tr><th>#</th><th>City</th><th>State</th><th>Comment</th><th>Avg Rainfall</th><th>Sunny Days</th><th>Best Activity</th></tr>";
for (i = 0; i < 8; i++) {
mytable +=
"<tr><td>" +
i +
"</td><td>" +
cities[i].name +
"</td><td>" +
cities[i].state +
"</td><td>" +
cities[i].text +
"</td><td>" +
cities[i].avgrainfall +
"</td><td>" +
cities[i].sunnydays +
"</td></tr>";
}
mytable += "</table>";
document.getElementById("table").outerHTML = mytable;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.