如何将 API 的值分配或引用到 HTML<option value="value Attribute?">价值属性？</option>

Question

这是sitRep：

我有一个 2 个下拉菜单，每个菜单都有几个选项，这些选项（js 中的“option:selected”）是连接到我的 javascript 文件中的 API 提取的查询参数。

我需要在 HTML 文件的选项中设置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>

所以，在任何地方读取<value="xbox-series">或任何其他平台需要改为读取类似于

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

因为 api 标识 XBOX SERIES 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>

您还可以通过以下方式获取平台列表以查看哪个平台是什么 id 请求： https://api.rawg.io/api/platforms?key=<YOUR_API_KEY>

用您的 api 密钥替换 <YOUR_API_KEY>

你也可以查看这个DEMO