Fetch data from API and show in Dropdownlist, click on option show data

Question

I'm still learning javascript and need little help.

Project is about display data from API in dropdown list, what I already did, and its working.

API LINK: http://api.football-data.org/v1/competitions

I want someone to help me with code, when you click on some value inside box, to display data for that ID

Example:

Dropdownlist showing data by:

caption

and every "caption" has unique ID, Example:

id: 444, caption: "Campeonato Brasileiro da Série A",

When I click on that option to show me TEAMS from that Football League.

Teams are in separate link:

http://api.football-data.org/v1/competitions/444/teams

I do not know how from here?!

let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose...';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = 'http://api.football-data.org/v1/competitions';

fetch(url)  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.warn('Looks like there was a problem. Status Code: ' + 
          response.status);  
        return;  
      }

      // Examine the text in the response  
      response.json().then(function(data) {  
        let option;
    
        for (let i = 0; i < data.length; i++) {
          option = document.createElement('option');
            option.text = data[i].caption;
            option.value = data[i].id;
          dropdown.add(option);
        }
        
        });

        }  
  )  
  .catch(function(err) {  
    console.error('Fetch Error -', err);  
  });

<!DOCTYPE html>
<html>
<head>
        <title>Football-Data API</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
        
         
</head>
<body>
        <div class="container">
                <h1 class="display-4 mb-4">www.football-data.org</h1>
                <div class="d-flex">
                  <div class="form-group">
                        <label for="sel1">Select competitions:</label>
                        <select class="form-control" id="locality-dropdown" onchange=(myFunction)>
                          <option></option>
                        </select>
                      </div>
                </div>
                <hr>
                <div id="output"></div>
              </div>
            
</body>
</html>

example scrnshot

Is something not working in your code? Is it showing any errors? — Chris Cousins
– Chris Cousins, Commented Aug 28, 2018 at 20:52
again API TOKEN forgot to put, code is working, but I do not know how to do from here, when you click on one competition, to show Teams, example "getStandings ()" for each option in the list — FiReFox
– FiReFox, Commented Aug 28, 2018 at 21:08

michaelitoh · Accepted Answer · 2018-08-28 21:36:20Z

This code show all team in the selected league.

let dropdown = document.getElementById('locality-dropdown');
    var teamList = document.getElementById("output");

    dropdown.length = 0;

    let defaultOption = document.createElement('option');
    defaultOption.text = 'Choose...';

    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;

    const url = 'http://api.football-data.org/v1/competitions';

    fetch(url)  
      .then(  
        function(response) {  
          if (response.status !== 200) {  
            console.warn('Looks like there was a problem. Status Code: ' + 
              response.status);  
            return;  
          }

          // Examine the text in the response  
          response.json().then(function(data) {  
            let option;
        
        	for (let i = 0; i < data.length; i++) {
              option = document.createElement('option');
                option.text = data[i].caption;
                option.value = data[i].id;
          	  dropdown.add(option);
            }
            
            });

            }  
      )  
      .catch(function(err) {  
        console.error('Fetch Error -', err);  
      });

      function myFunction(e){
        teamList.innerHTML = "";

        //Get selected league id
        var leagueId = e.options[e.selectedIndex].value;        
        
        fetch(`http://api.football-data.org/v1/competitions/${leagueId}/teams`)  
      .then(  
        function(response) {  
          if (response.status !== 200) {  
            console.warn('Looks like there was a problem. Status Code: ' + 
              response.status);  
            return;  
          }

          response.json().then(function(data) { 
            //iterate over each team 
            data.teams.forEach(team =>{
                var p = document.createElement("p");
                p.innerHTML = team.name; //Add team name to a p element
                teamList.appendChild(p);  
            });
            
            });

            }  
      )  
      .catch(function(err) {  
        console.error('Fetch Error -', err);  
      });

      }

<!DOCTYPE html>
    <html>
    <head>
            <title>Football-Data API</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
            
             
    </head>
    <body>
            <div class="container">
                    <h1 class="display-4 mb-4">www.football-data.org</h1>
                    <div class="d-flex">
                      <div class="form-group">
                            <label for="sel1">Select competitions:</label>
                            <select class="form-control" id="locality-dropdown" onchange="myFunction(this);">
                              <option></option>
                            </select>
                          </div>
                    </div>
                    <hr>
                    <div id="output"></div>
                  </div>
                
    </body>
    </html>

Collectives™ on Stack Overflow

Fetch data from API and show in Dropdownlist, click on option show data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related