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

Posted 2023-05-09

【中文标题】将对象中的值与HTML选择选项中的值匹配的Javascript函数？

【英文标题】：Javascript function that matches the value in an object to the value in an HTML select option?

【发布时间】：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)我可以得到一个包含每个团队对象的数组，但我不知道如何遍历数组并拉取比赛

【参考方案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)