CODEWITHSUNDEEP
javascriptjqueryhtmlselect
Blue Minnie
Blue Minnie

Reputation: 231

JQuery json.filter two conditions

I have a select list that needs to be filtered according to "sa_mb" and "Model" but I can't seem to filter the two conditions needed. Whenever I select model A, select_list SA, DESTINATION_A, and CRITERIA_A will appear. If the user select model A and MB, there should not be a displayed result. 

$(document).ready(function() {
  var json = [{
      "sa_mb": "SA",
      "Model": "A",
      "Destination": "DESTINATION_A",
      "Criteria": "CRITERIA_A",
    },
    {
      "sa_mb": "MB",
      "Model": "B",
      "Destination": "DESTINATION_B",
      "Criteria": "CRITERIA_B",
    }
  ];


  $("#SELECT_LIST").on("change", () => {
    $("table").html(`<tr>
							<th>MODEL</th>
							<th>DESTINATION</th>
							<th>CRITERIA</th>
							</tr>`);
    var matchJSON = json.filter(e => e["sa_mb"].toLowerCase() == $("#SELECT_LIST").val().toLowerCase());
    matchJSON.forEach(obj => $("table").append(`<tr><td>${obj["Model"]}</td>
														<td>${obj["Destination"]}</td>
														<td>${obj["Criteria"]}</td>
														</tr>`));
  });
});
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta destination="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel=\ "stylesheet\" href=\ "https://fonts.googleapis.com/icon?family=Material+Icons\">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <label for="model"><b>MODEL: </b></label>
  <select ID="MODEL" NAME="MODEL" required>
    <option value="" selected="selected">Select Model...</option>
    <option value="A"> A </option>
    <option value="B"> B </option>
  </select>

  <label for="SELECT_LIST"><b> SELECT_LIST: </b></label>
  <select id="SELECT_LIST" name="SELECT_LIST" required>
    <option value="Select Material Type..." selected="selected"> --Select Material Type-- </option>
    <option value="SA"> SA </option>
    <option value="MB"> MB </option>
  </select>


  <table id="bod">
    <tr>
      <th>MODEL</th>
      <th>DESTINATION</th>
      <th>CRITERIA</th>
    </tr>
  </table>

</html>

Upvotes: 1

Views: 58

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Just add a second condition to your filter to check the 'Model' property too like:

var matchJSON = json.filter((e) => {
     return e["sa_mb"].toLowerCase() == $("#SELECT_LIST").val().toLowerCase() && 
            e["Model"].toLowerCase() == $("#MODEL").val().toLowerCase();
});

NOTE: It will be better to attach the event to both lists as I do in the provided working sample. 

$(document).ready(function() {
  var json = [{
      "sa_mb": "SA",
      "Model": "A",
      "Destination": "DESTINATION_A",
      "Criteria": "CRITERIA_A",
    },
    {
      "sa_mb": "MB",
      "Model": "B",
      "Destination": "DESTINATION_B",
      "Criteria": "CRITERIA_B",
    }
  ];


  $("#SELECT_LIST, #MODEL").on("change", () => {
    $("table").html(`<tr>
            <th>MODEL</th>
            <th>DESTINATION</th>
            <th>CRITERIA</th>
            </tr>`);
            
    var matchJSON = json.filter((e) => {
      return e["sa_mb"].toLowerCase() == $("#SELECT_LIST").val().toLowerCase() && e["Model"].toLowerCase() == $("#MODEL").val().toLowerCase();
    });
    
    matchJSON.forEach(obj => $("table").append(`<tr><td>${obj["Model"]}</td>
                          <td>${obj["Destination"]}</td>
                          <td>${obj["Criteria"]}</td>
                          </tr>`));
  });
});
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta destination="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel=\ "stylesheet\" href=\ "https://fonts.googleapis.com/icon?family=Material+Icons\">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <label for="model"><b>MODEL: </b></label>
  <select ID="MODEL" NAME="MODEL" required>
    <option value="" selected="selected">Select Model...</option>
    <option value="A"> A </option>
    <option value="B"> B </option>
  </select>

  <label for="SELECT_LIST"><b> SELECT_LIST: </b></label>
  <select id="SELECT_LIST" name="SELECT_LIST" required>
    <option value="Select Material Type..." selected="selected"> --Select Material Type-- </option>
    <option value="SA"> SA </option>
    <option value="MB"> MB </option>
  </select>


  <table id="bod">
    <tr>
      <th>MODEL</th>
      <th>DESTINATION</th>
      <th>CRITERIA</th>
    </tr>
  </table>

</html>

Upvotes: 1

Hiren Raiyani
Hiren Raiyani

Reputation: 744

Try filter method like this:

$(document).ready(function() {
    var json = [{
        "sa_mb": "SA",
        "Model": "A",
        "Destination": "DESTINATION_A",
        "Criteria": "CRITERIA_A",
    }, {
        "sa_mb": "MB",
        "Model": "B",
        "Destination": "DESTINATION_B",
        "Criteria": "CRITERIA_B",
    }];


    $("#SELECT_LIST").on("change", () => {
        $("table").html(`<tr>
                            <th>MODEL</th>
                            <th>DESTINATION</th>
                            <th>CRITERIA</th>
                            </tr>`);
        var matchJSON = json.filter(function(v){
            if(v.sa_mb.toLowerCase() == $("#SELECT_LIST").val().toLowerCase() && v.Model.toLowerCase() == $("#MODEL").val().toLowerCase()){
                return v;
            }
        });
        matchJSON.forEach(obj => $("table").append(`<tr><td>${obj["Model"]}</td>
                                                        <td>${obj["Destination"]}</td>
                                                        <td>${obj["Criteria"]}</td>
                                                        </tr>`));
    });
});

Upvotes: 0

Related Questions