CODEWITHSUNDEEP
javascriptjqueryarraysfunctionobject
jfc
jfc

Reputation: 407

Javascript function that matches the value in an object to the value in an HTML select option?

I'm trying to create a dynamic bracket for the NFL playoffs with javascript. The bracket is different than a traditional tournament bracket because the match-ups in round 2 and 3 are based on the teams rank. So I created this object with all the teams and their rank -

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,
      },  
    }
  }
}

On the HTML side I have the first 3 matchups like this -

      <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>

I want to create a function that pulls the value that is selected and if that value matches the name it will pull the other value (key is rank) in that object.

Then once I have the rank, I can run it through another function to determine the highest to lowest ranked teams, and I can use those to populate round 2 and 3.

I know that if I do const teamObj = Object.values(library.afc.teams) I can get an array with an object of each team, but I don't know how to iterate through the array and pull the match

Upvotes: 2

Views: 157

Answers (1)

Endothermic_Dragon
Endothermic_Dragon

Reputation: 1187

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)

Upvotes: 1

Related Questions