Question

当我从下拉菜单中选择一个选项时，我将尝试使用它，它将使用data.json文件中的正确信息更新结果。现在，它将从data [0]返回字符串化的数据，但是我希望它根据所选的选项ID返回。因此，如果用户选择id为“ 4”的“ Sarah”，我希望它从第4个JSON对象中获取数据。

<select id="options" onchange="myfunction()">
    <option ></option>
    <option id="0">Tyson</option>
    <option id="1">Jessica</option>
    <option id="2">Joshua</option>
    <option id="3">Jennifer</option>
    <option id="4">Sarah</option>
</select>
<br><br>

<div id="myData"></div>

function myfunction() {
    fetch('data.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
    function appendData(data) {
        var mainContainer = document.getElementById("myData");

        var div = document.createElement("div");
        div.innerHTML = JSON.stringify(data[0], null, 4);
        mainContainer.appendChild(div);
    }
}

[
  {
  "id" : 0,
  "first_name": "Tyson",
  "gender": "male",
  "isAlive": true,
  "married": true,
  "has_children": false,
  },

  {
  "id" : 1,
  "first_name": "Jessica",
  "gender": "female",
  "isAlive": true,
  "married": true,
  "has_children": false,
  },
  {
    "id" : 2,
    "first_name": "Joshua",
    "gender": "male",
    "isAlive": true,
    "married": true,
    "has_children": true,
  },

  {
    "id" : 3,
    "first_name": "Jennifer",
    "gender": "female",
    "isAlive": true,
    "married": true,
    "has_children": true,
 },
  {
    "id" : 4,
    "first_name": "Sarah",
    "gender": "female",
    "isAlive": true,
    "married": false,
    "has_children": false,
  }

Answer 1

首先，将appendData从myfunction中移出。不需要嵌套。

第二，您需要在myfunction中捕获下拉列表的选定值，然后根据该值过滤data集合。可能是这样的：

function myfunction() {
    var selectedId = document.getElementById("options").value; // e.g. "4" (string)
    fetch('data.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            // let's filter the data
            var person = data.filter(function(p) { return p.id == selectedId; });
            appendData(person);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
}

最后，您必须稍微调整appendData函数以不再尝试索引data对象，因为它不再是数组：

function appendData(data) {
    var mainContainer = document.getElementById("myData");

    var div = document.createElement("div");
    div.innerHTML = JSON.stringify(data, null, 4);
    mainContainer.appendChild(div);
}

最后的建议是不要在HTML属性中放置事件。这是非常陈旧的。相反，请学习如何使用addEventListener通过DOM将事件附加到元素。

根据所选的“选项”更改innerHTML结果

1 个答案: