按 JSON 字段搜索名称

Question

我正在尝试构建一个提取 JSON 文件的小型 Web 应用程序。我能够获得显示的信息，但我想根据所选值限制显示的内容。

这是我的html

<div class="wrapper">
<div class="profile">
    <select>
    <option value="default" selected>Choose a superhero...</option>
    <option value="1111">Superman</option>
    <option value="2222">Batman</option>
    <option value="3333">Spiderman</option>
</select>
<button id="showPeopleButton">Show People</button>
<table id="userdata" border="2" style="display: none">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
    <th>City</th>
  </thead>
  <tbody>

  </tbody>
</table>

</div>
</div>

现在是我的 JavaScript。我已将 JSON 数据放在 JavaScript 中。

/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
    // Call the showPeople() function
    showPeople();
});

// Json data
var people = [{
        "firstName": "Clark",
        "lastName": "Kent",
        "job": "Reporter",
        "roll": 20,
        "heroId": 1111
    },
    {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "job": "Playboy",
        "roll": 30,
        "heroid": 2222
    },
    {
        "firstName": "Peter",
        "lastName": "Parker",
        "job": "Photographer",
        "roll": 40,
        "heroId": 3333
    }];

// Show People function will draw the table
function showPeople() {
    // Show table
    $('#userdata').show();

    //Populate table  
    $.each(people, function(index, person) {
        var tableRow =
            "<tr>" +
            "<td>" + person.firstName + "</td>" +
            "<td>" + person.lastName + "</td>" +
            "<td>" + person.job + "</td>" +
            "<td>" + person.roll + "</td>" +
            "</tr>";
        $(tableRow).appendTo("#userdata tbody");
    });

}

我怎样才能让它为我工作？

Answer 1

你必须

1. 每次调用 showPeople 时重置英雄表。

2. 将英雄属性名称更改为 heroId 为蝙蝠侠：P

3. 过滤人员数组以仅匹配英雄 ID，即 当前选择

4. 显示结果

示例代码：

    /* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
  // Call the showPeople() function
  showPeople();
});

var heroes = [{id: 1111, name: 'Superman'}, {id: 2222, name:'Batman'}, {id: 3333, name: 'Spiderman'}];
// Json data
var people = [{
    "firstName": "Clark",
    "lastName": "Kent",
    "job": "Reporter",
    "roll": 20,
    "heroId": 1111
  },
  {
    "firstName": "Bruce",
    "lastName": "Wayne",
    "job": "Playboy",
    "roll": 30,
    "heroId": 2222
  },
  {
    "firstName": "Peter",
    "lastName": "Parker",
    "job": "Photographer",
    "roll": 40,
    "heroId": 3333
  }
];

// Show People function will draw the table
function showPeople() {
  // Show table
  $('#userdata').show();

  // Reset table
  $("#userdata tbody").empty();

  //Populate table  
  var heroId = Number($(".profile select").val());
  var filteredPeople = people.filter(person => person.heroId === heroId);

  $.each(filteredPeople, function(index, person) {
    var tableRow =
      "<tr>" +
      "<td>" + person.firstName + "</td>" +
      "<td>" + person.lastName + "</td>" +
      "<td>" + person.job + "</td>" +
      "<td>" + person.roll + "</td>" +
      "</tr>"
    $(tableRow).appendTo("#userdata tbody");
  });

}

Answer 2

• 您需要清空tbody 元素。
• 使用$('#hero option:checked').val();检查horeId和选择的选项

/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
  // Call the showPeople() function
  showPeople();
});

// Json data
var people = [{
    "firstName": "Clark",
    "lastName": "Kent",
    "job": "Reporter",
    "roll": 20,
    "heroId": 1111
  },
  {
    "firstName": "Bruce",
    "lastName": "Wayne",
    "job": "Playboy",
    "roll": 30,
    "heroId": 2222
  },
  {
    "firstName": "Peter",
    "lastName": "Parker",
    "job": "Photographer",
    "roll": 40,
    "heroId": 3333
  }
];

// Show People function will draw the table
function showPeople() {
  // Show table
  $('#userdata').show();
  var hero = $('#hero option:checked').val();
  //Populate table  
  $("#userdata tbody").empty()
  $.each(people, function(index, person) {

    if (hero == person.heroId) {

      var tableRow =
        "<tr>" +
        "<td>" + person.firstName + "</td>" +
        "<td>" + person.lastName + "</td>" +
        "<td>" + person.job + "</td>" +
        "<td>" + person.roll + "</td>" +
        "</tr>"
      $(tableRow).appendTo("#userdata tbody");
    }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="profile">
    <select id="hero">
    <option value="default" selected>Choose a superhero...</option>
    <option value="1111">Superman</option>
    <option value="2222">Batman</option>
    <option value="3333">Spiderman</option>
  </select>
    <button id="showPeopleButton">Show People</button>
    <table id="userdata" border="2" style="display: none">
      <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email Address</th>
        <th>City</th>
      </thead>
      <tbody>

      </tbody>
    </table>

  </div>
</div>

Answer 3

你可以从<select>获取 heroId：

var heroid = $(".profile>select").val();

然后进行比较，用return 退出.each 的当前迭代（相当于for 循环中的continue，而不是像break 这样的完全退出）。

$.each(people, function(index, person) {
    if (person.heroId != heroid) return;

/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
  // Call the showPeople() function
  showPeople();
});

// Json data
var people = [{
    "firstName": "Clark",
    "lastName": "Kent",
    "job": "Reporter",
    "roll": 20,
    "heroId": 1111
  },
  {
    "firstName": "Bruce",
    "lastName": "Wayne",
    "job": "Playboy",
    "roll": 30,
    "heroId": 2222
  },
  {
    "firstName": "Peter",
    "lastName": "Parker",
    "job": "Photographer",
    "roll": 40,
    "heroId": 3333
  }
];

// Show People function will draw the table
function showPeople() {
  // Show table
  $('#userdata').show().find("tbody").empty();
  
  var heroid = $(".profile>select").val();

  //Populate table  
  $.each(people, function(index, person) {
    if (person.heroId != heroid) return;
    var tableRow =
      "<tr>" +
      "<td>" + person.firstName + "</td>" +
      "<td>" + person.lastName + "</td>" +
      "<td>" + person.job + "</td>" +
      "<td>" + person.roll + "</td>" +
      "</tr>"
    $(tableRow).appendTo("#userdata tbody");
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="profile">
    <select>
    <option value="default" selected>Choose a superhero...</option>
    <option value="1111">Superman</option>
    <option value="2222">Batman</option>
    <option value="3333">Spiderman</option>
</select>
    <button id="showPeopleButton">Show People</button>
    <table id="userdata" border="2" style="display: none">
      <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email Address</th>
        <th>City</th>
      </thead>
      <tbody>

      </tbody>
    </table>

  </div>
</div>