How to assign or reference an API's value to the HTML <option> value Attribute?

user_19663556 0
Viewed 32

Here's the sitRep:

I've got a 2 drop down menus with several selections each, and the selections ("option:selected" in js) are meant to be query parameters that are connected to an API fetch in my javascript file.

I need to set the value="" within the option on the HTML file to reflect its designation/location in the API, and I've had no luck in discovering the proper syntax.

For clarity, here's a snippet of the html in question:

 <select class="form-select form-select-lg mb-3 btn btn-secondary btn-lg" id="platform-drop" aria-label=".form-select-lg example">
                            <option selected>Platforms:</option>
                            <option class="dropdown-item" value="playstation-5">Playstation 5</option>
                            <option class="dropdown-item" value="playstation-4">Playstation 4</option>
                            <option class="dropdown-item" value="xbox-series">XBOX Series X/S</option>

So, everywhere within that reads <value="xbox-series"> or any other platform needs to instead read something akin to

<option class="dropdown-item" value="apiSource.platforms.id:187">XBOX Series X/S</option>

as the api identifies the XBOX SERIES X/S, in this case, as ->Platform->"id": 187. And that's where I get lost in the woods.

An "under-construction" jS for reference and for anyone wondering why I don't just innerHTML or textContent to a div and be done with it:

var platformBtn = $('#platform-drop');
var genreBtn = $('#genre-drop');
var submitBtn = $('#submit-btn');

submitBtn.on('click', function(event){
    event.preventDefault();

    var platformSelection = $("#platform-drop option:selected").val();
    console.log(platformSelection)
    var genreSelection = $('#genre-drop option:selected').val();
    console.log(genreSelection)
    
    var gamesUrl = "https://api.rawg.io/api/games?genres="+genreSelection+"&platforms="+platformSelection+"&key=0da6d52b21ec4d8fac88f4f4ceafe806";

    fetch(gamesUrl)
    .then(function (response) {
        if (response.ok) {
            return response.json();
        }
    })
    .then(function (data) {
        console.log(data.results);
    })
})

Any insight would be greatly appreciated.

-LujanSolo

api jquery javascript
1 Answers

After reading rawg.io api documentation I realized you are sending wrong information on your request here:

var gamesUrl = "https://api.rawg.io/api/games?genres="+genreSelection+"&platforms="+platformSelection+"&key=0da6d52b21ec4d8fac88f4f4ceafe806";

I don't know how you defined genreSelection but I assume u defined it correcly let's assume genreSelection = 'action';

You should fill platforms with id or string of multiple id separating with , like this:

platforms = '2';
//in this case you will get games available for platform id 2 


platforms = '2,3,4'; 
//in this case you will get games available for 2 and 3 and 4 platform ids

So you should change your code to:

<select class="form-select form-select-lg mb-3 btn btn-secondary btn-lg" id="platform-drop" aria-label=".form-select-lg example">
  <option selected>Platforms:</option>
  <option class="dropdown-item" value="187">Playstation 5</option>
  <option class="dropdown-item" value="18">Playstation 4</option>
  <option class="dropdown-item" value="186">XBOX Series X/S</option>
</select>

You can also get list of platforms to see which platform is what id with a get request to: https://api.rawg.io/api/platforms?key=<YOUR_API_KEY>

replace <YOUR_API_KEY> with your api key

You can also check this DEMO

user_198493470
Related