如何将API的值赋值或引用到HTML值属性？

Question

这里是sitRep：

我有两个下拉菜单，每个菜单都有几个选择，选择(js中的“选项:selected”)意味着是连接到我的javascript文件中的API提取的查询参数。

我需要在文件的选项中设置value=“”，以反映它在API中的指定/位置，而且我还没有发现正确的语法。

为了清晰起见，这里有一个有关html的片段：

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

因此，在阅读或任何其他平台的任何地方都需要阅读类似于

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

当api标识XBOX系列X/S时，在本例中为->Platform->"id"：187。那就是我在树林里迷路的地方。

一个“在建中”的jS，供参考和任何想知道为什么我不只是innerHTML或textContent到div并完成它：

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);
    })
})

任何洞察力都将不胜感激。

-LujanSolo

Answer 1

在阅读了rawg.io api文档之后，我意识到您在请求中发送了错误的信息：

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

我不知道您是如何定义genreSelection的，但我假设您正确地定义了它，让我们假设genreSelection = 'action';

您应该用id或多个id分隔字符串填充platforms，如下所示：

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 

因此，您应该将代码更改为：

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

您还可以获得平台列表，以查看get请求到：https://api.rawg.io/api/platforms?key=<YOUR_API_KEY>时哪个平台是id。

用api键替换

您还可以检查 这个演示