Javascript 动态选择要迭代的特定对象和键值,doc.write to div

Javascript 动态选择要迭代的特定对象和键值,doc.write to div,javascript,object,document.write,Javascript,Object,Document.write,我是一个受过Teamtreehouse教育的新手,试图创建一个简单的JavaScript函数,在解析URL以从URL中的必要字符串中下拉并创建变量后,我将使用该标识符创建一个动态更新脚本,在本例中,该脚本将,将大学足球队的赛程日期和对手发送给HTML中的div 例如,/teams/fsu.html将被解析为fsu和html,然后我将使用字符串fsu来确保我的函数知道它们在哪个页面上,从而知道要传递哪些对象/数组等。我可以连接每个游戏的日期和游戏,但实际上我无法将它们正确地放到页面上。下面是我的代

我是一个受过Teamtreehouse教育的新手,试图创建一个简单的JavaScript函数,在解析URL以从URL中的必要字符串中下拉并创建变量后,我将使用该标识符创建一个动态更新脚本,在本例中,该脚本将,将大学足球队的赛程日期和对手发送给HTML中的div

例如,/teams/fsu.html将被解析为fsu和html,然后我将使用字符串fsu来确保我的函数知道它们在哪个页面上,从而知道要传递哪些对象/数组等。我可以连接每个游戏的日期和游戏,但实际上我无法将它们正确地放到页面上。下面是我的代码示例:

// This objects contains each game day of each week of the college football season.

var gameDays = {
week1: ["Thursday, August 28th",
"Friday, August 29th",
"Saturday, August 30th",
"Sunday, August 31st",
"Monday, September 1st"],
week2: ["Thursday, September 4th",
"Friday, September 5th",
"Saturday, September 6th"],
week3: ["Thursday, September 11th",
"Friday, September 12th",
"Saturday, September 13th",
"Sunday, September 14th"],
week4: ["Thursday, September 18th",
"Friday, September 19th",
"Saturday, September 20th"],
week5: ["Thursday, September 25th",
"Friday, September 26th",
"Saturday, September 27th"],
week6: ["Thursday, October 2nd",
"Friday, October 3rd",
"Saturday, October 4th"],
week7: ["Thursday, October 9th",
"Friday, October 10th",
"Saturday, October 11th",
"Sunday, October 12th"],
week8: ["Tuesday, October 14th",
"Thursday, October 16th",
"Friday, October 17th",
"Saturday, October 18th"],
week9: ["Tuesday, October 21st",
"Thursday, October 23rd",
"Friday, October 24th",
"Saturday, October 25th",
"Sunday, October 26th"],
week10: ["Thursday, October 30th",
"Friday, October 31st",
"Saturday, November 1st"],
week11: ["Tuesday, November 4th",
"Wednesday, November 5th",
"Thursday, November 6th",
"Friday, November 7th",
"Saturday, November 8th"],
week12: ["Tuesday, November 11th",
"Wednesday, November 12th",
"Thursday, November 13th",
"Friday, November 14th",
"Saturday, November 15th"],
week13: ["Tuesday, November 18th",
"Wednesday, November 19th",
"Thursday, November 20th",
"Friday, November 21st",
"Saturday, November 22nd",
"Sunday, November 23rd"],
week14: ["Tuesday, November 25th",
"Thursday, November 27th",
"Friday, November 28th",
"Saturday, November 29th"],
week15: ["Thursday, December 4th",
"Saturday, December 6th"],
week16: ["Saturday, December 13th"]
}

// I've created objects for each Top 25 team, but here's just three for this example

// #1:

var fsu = {
    conf: "ACC",
    sched: 
        [gameDays.week1[2] + " vs Oklahoma State",
        gameDays.week2[2] + " vs Citadel",
        gameDays.week4[2] + " vs #16 Clemson",
        gameDays.week5[2] + " at North Carolina State",
        gameDays.week6[2] + " vs Wake Forest",
        gameDays.week7[2] + " at Syracuse",
        gameDays.week8[3] + " vs #17 Notre Dame",
        gameDays.week10[0] + " at Louisville",
        gameDays.week11[4] + " vs Virginia",
        gameDays.week12[4] + " at Miami",
        gameDays.week13[4] + " vs Boston College",
        gameDays.week14[3] + " vs Florida"]
}

// #2:

var bama = {
    conf: "SEC",
    sched: 
        [gameDays.week1[2] + " vs West Virginia",
        gameDays.week2[2] + " vs Florida International",
        gameDays.week3[2] + " vs Southern Mississippi",
        gameDays.week4[2] + " vs Florida",
        gameDays.week6[2] + " @ #18 Ole Miss",
        gameDays.week7[2] + " at Arkansas",
        gameDays.week8[3] + " vs #21 Texas A&M",
        gameDays.week9[3] + " at Tennessee",
        gameDays.week11[4] + " @ #13 LSU",
        gameDays.week12[4] + " vs Mississippi State",
        gameDays.week13[4] + " vs Western Carolina",
        gameDays.week14[3] + " vs #6 Auburn"]
}

// #3:

var oregon = {
    conf: "PAC12",
    sched: 
        [gameDays.week1[2] + " vs South Dakota",
        gameDays.week2[2] + " vs #8 Michigan State",
        gameDays.week3[2] + " vs Wyoming",
        gameDays.week4[2] + " at Washington State",
        gameDays.week6[0] + " vs Arizona",
        gameDays.week7[2] + " at #7 UCLA",
        gameDays.week8[3] + " vs #25 Washington",
        gameDays.week9[2] + " at California",
        gameDays.week10[2] + " vs #11 Stanford",
        gameDays.week11[4] + " at Utah",
        gameDays.week13[4] + " vs Colorado",
        gameDays.week14[3] + " at Oregon State"]
}

// And here's the the JS I'm using to try and bring each schedule to the page:

// This parses the URL and grabs the proper identifier for me, i.e. "fsu"

function parseURL() {
  var match = window.location.href.match(/(\w+).html$/);
  if (match) {
    return match[1];
  }
  return null;
}

// This is what I was _hoping_ would create the proper variable to call for the needed
// object and key value, for instance, "fsu.sched", which would then return their schedule:

var teamSched = parseURL() + ".sched";

// This is the scripting I was then using as a test to simply get "teamSched" 
// value to the page.

function testParse() {
    document.getElementById('scheduleText').innerHTML;
    document.write(teamSched);
}

// And this script ties it all together and executes it.

var team = parseURL();
if (teamSched) {
  testParse(teamSched);
}
所以我在HTML的输出中得到的只是文本fsu.sched的字符串,而不是fsu.sched的实际对象键值

我认为我没有把这些语句用于对象是搞砸了,但我认为,作为一个新手,显然,JS文件中的每个变量都是可见的,这会让我清楚地知道如何围绕这些变量编写代码


我将真诚地感谢任何帮助和洞察力,你可以提供这个令人难以置信的难堪的新秀

您最初创建的是要用作变量的字符串

如果您将团队数据包装到一个对象中,那么您拥有的代码的工作原理与gameDays相同。因此,以fsu为例:

teams = {
            fsu : {
                conf: "ACC",
                sched: 
                [gameDays.week1[2] + " vs Oklahoma State",
                gameDays.week2[2] + " vs Citadel",
                gameDays.week4[2] + " vs #16 Clemson",
                gameDays.week5[2] + " at North Carolina State",
                gameDays.week6[2] + " vs Wake Forest",
                gameDays.week7[2] + " at Syracuse",
                gameDays.week8[3] + " vs #17 Notre Dame",
                gameDays.week10[0] + " at Louisville",
                gameDays.week11[4] + " vs Virginia",
                gameDays.week12[4] + " at Miami",
                gameDays.week13[4] + " vs Boston College",
                gameDays.week14[3] + " vs Florida"]
            },
            bama : {
                conf: "SEC",
                sched: 
                [gameDays.week1[2] + " vs West Virginia",
                gameDays.week2[2] + " vs Florida International",
                gameDays.week3[2] + " vs Southern Mississippi",
                gameDays.week4[2] + " vs Florida",
                gameDays.week6[2] + " @ #18 Ole Miss",
                gameDays.week7[2] + " at Arkansas",
                gameDays.week8[3] + " vs #21 Texas A&M",
                gameDays.week9[3] + " at Tennessee",
                gameDays.week11[4] + " @ #13 LSU",
                gameDays.week12[4] + " vs Mississippi State",
                gameDays.week13[4] + " vs Western Carolina",
                gameDays.week14[3] + " vs #6 Auburn"]
            }
        }
然后在逻辑中,将teamSched初始化为teams对象中的团队名称:

var teamSched = parseURL();
在testParse中,将document.write行更改为:

document.write(teams[teamSched].sched);

太棒了,非常感谢!那么,我只是将单个对象fsu包装在teams变量中,还是将所有对象包装到单个对象中?实际上,我刚刚回答了我自己的问题。对于像我一样阅读绿色内容的任何人来说,你可以将多个对象放入一个对象中,并确保在对象中包装的每个对象后添加逗号!再次感谢你的帮助,我真的很感激!您只需要将团队变量包装到对象中,因此在最初的帖子中,您只需要包装fsu、bama和俄勒冈州。如果在实际代码中有更多团队的数据,则需要对每个团队执行相同的操作。我将编辑我的帖子,展示fsu和bama的情况。