将对象中的值与HTML选择选项中的值匹配的Javascript函数？答案

【问题标题】：Javascript function that matches the value in an object to the value in an HTML select option?将对象中的值与HTML选择选项中的值匹配的Javascript函数？
【发布时间】：2021-04-14 17:04:30
【问题描述】：

我正在尝试使用 javascript 为 NFL 季后赛创建一个动态括号。支架与传统锦标赛支架不同，因为第 2 轮和第 3 轮的比赛是基于球队排名的。所以我用所有的团队和他们的排名创建了这个对象 -

const library = {

  afc: {
    teams: {
      t01: {
        name: 'Chiefs',
        rank: 1,
      },
      t02: {
        name: 'Bills',
        rank: 2,
      },
      t03: {
        name: 'Steelers',
        rank: 3,
      },
      t04: {
        name: 'Titans',
        rank: 4,
      },
      t05: {
        name: 'Ravens',
        rank: 5,
      },
      t06: {
        name: 'Browns',
        rank: 6,
      },
      t07: {
        name: 'Colts',
        rank: 7,
      },  
    }
  }
}

在 HTML 方面，我有前 3 场这样的比赛 -

      <div class="matchup" id="game">
        <label>7 Colts @ 2 Bills</label>
        <select>
          <option value="Bills" id="team-1-r1-1">Bills</option>
          <option value="Colts" id="team-2-r2-2">Colts</option>
        </select> 
      </div>

我想创建一个函数来拉取选定的值，如果该值与名称匹配，它将拉取该对象中的另一个值（键是排名）。

一旦我获得了排名，我可以通过另一个函数运行它来确定排名从最高到最低的球队，然后我可以使用这些来填充第 2 轮和第 3 轮。

我知道如果我这样做const teamObj = Object.values(library.afc.teams)我可以得到一个包含每个团队对象的数组，但我不知道如何遍历数组并拉取比赛

【问题讨论】：

标签： javascript jquery arrays function object

【解决方案1】：

const library = {
  afc: {
    teams: {
      t01: {
        name: 'Chiefs',
        rank: 1,
      },
      t02: {
        name: 'Bills',
        rank: 2,
      },
      t03: {
        name: 'Steelers',
        rank: 3,
      },
      t04: {
        name: 'Titans',
        rank: 4,
      },
      t05: {
        name: 'Ravens',
        rank: 5,
      },
      t06: {
        name: 'Browns',
        rank: 6,
      },
      t07: {
        name: 'Colts',
        rank: 7,
      },
    }
  }
}

//Create list to store the teams in order
teamsInOrder = new Array(Object.keys(library.afc.teams).length)

//Loop through the teams, putting them in order
Object.values(library.afc.teams).forEach(function(teamListed) {
  teamsInOrder[teamListed.rank - 1] = teamListed.name
})

//Create select
select = document.createElement("select")

//Loop through the teams, inserting each of them into the select
teamsInOrder.forEach(function(teamName, index) {
  option = document.createElement("option")
  option.value = teamName
  option.id = "team-" + (index + 1) + "-r" + (index + 1) + "-" + (index + 1)
  option.innerText = teamName
  select.appendChild(option)
})

//Insert the select into the document's body
document.body.appendChild(select)

【讨论】：