Search for name by a JSON field

Question

I am trying to build a small web app that pulls of a JSON file. I am able to get the information displayed but I want to limit what is displayed based off a value selected.

Here is my 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>

And now my JavaScript. I have placed the JSON data in the 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");
    });

}

How can I get it to work for me?

Answer 1

You can get the heroId from the <select>:

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

then a make a compare, with a return to exit out of the current iteration of the .each (equivalent to a continue in a for loop, not a complete exit like a 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>

Answer 2

You have to

1. Reset the hero table everytime a call to showPeople is made.

2. Change the heroid property name to heroId for batman :P

3. Filter the people array to match only the hero id which is currently selected

4. Display results

Example code:

    /* 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 3

• You need to empty the tbody element.
• Check for the horeId and the selected option using $('#hero option:checked').val();

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