CODEWITHSUNDEEP
jqueryif-statementconditional-statements
Spark85
Spark85

Reputation: 45

If/Else Statement issue

I have an input where users search for a pantone color. If the input value matches a pantone name, that pantones information shows up in the dom.

The problem i have is when a user enters a number thats is not in the database, the previous data stays in the dom and isn't cleared. I want to give a message to the user that the color they are searching for isn't in the database and clear the previous data.

this is the code im using to trigger a search

var pantone_data = (data) //data is the json from another file im importing
$('#pantoneSearch').focusout(function() {
  var pantoneSearchText = parseInt($('#pantoneSearch').val());
  // console.log(pantone_data)
  $.each(pantone_data, function(i, obj) {
    if (pantoneSearchText == obj.name) {
      console.log("it sure does")
      $('#pantoneTitle').empty();
      $('.card-body span').empty();

      $('#pantoneTitle').append($('<h3>Pantone ' + obj.name + '</h3>'));

      $('#stock1').append($('<p>Stock Name: ' + obj.s1_name + '</p>'));
      $('#stock1').append($('<p>Stock Catagory: ' + obj.s1_catagory + '</p>'));
      $('#stock1').append($('<p>Pantone Match: ' + obj.s1_pantone_match + '</p>'));
      $('#stock1').append($('<p>Delta: ' + obj.s1_delta + '</p>'));

      $('#stock2').append($('<p>Stock Name: ' + obj.s2_name + '</p>'));
      $('#stock2').append($('<p>Stock Catagory: ' + obj.s2_catagory + '</p>'));
      $('#stock2').append($('<p>Pantone Match: ' + obj.s2_pantone_match + '</p>'));
      $('#stock2').append($('<p>Delta: ' + obj.s2_delta + '</p>'));
      return;
    } else {
      console.clear()
      console.log("nope")
      $('.card-body span').empty();
      return;
    }
  });
});

Here is the JSON for data

var data = 
[
    {   
        "id":"11",
        "name":"11",
        "s1_name":"SG12345",
        "s1_catagory":"Semigloss",
        "s1_pantone_match":"true",
        "s1_delta":">2",
        "s2_name":"SP54321",
        "s2_catagory":"SilerMax",
        "s2_pantone_match":"false",
        "s2_delta":"<5"
    },
    {   
        "id":"22",
        "name":"22",
        "s1_name":"ZZ00000",
        "s1_catagory":"Semigloss",
        "s1_pantone_match":"true",
        "s1_delta":">21",
        "s2_name":"YY1111111",
        "s2_catagory":"SilerMax",
        "s2_pantone_match":false,
        "s2_delta":"<100"
    }
]

Right now what happens is that it seems to skip the if statement condition and goes directly to the else statement, clearing everything in the ".card-body span". I need to figure out how to set up the conditoin if the pantoneSearchText does not match any pantone names, clear stuff and add message.

hope this is clear.

Upvotes: 1

Views: 62

Answers (2)

wasuregusa
wasuregusa

Reputation: 55

You want to search through your json data, update the DOM if an object is found, and clear previous data if not found.

var pantone_data = (data) //data is the json from another file im importing
$('#pantoneSearch').focusout(function() {
  var pantoneSearchText = parseInt($('#pantoneSearch').val());
  let found_obj = pantone_data.find(obj => pantoneSearchText == obj.name)
  if (found_obj){
    //update dom
  } else {
    //clear dom
  }
}

You seem to have the code for updating the dom already.

For clearing it - you could use $('#stock1').empty() etc... which removes all children And could even throw in alert if you wanted to let the user know alert('No matching color found')

If you want to keep using the $each function then you need to make sure you break upon successfully finding the object; to do that in jquery, the callback function needs to return false. So something like this:

$.each(pantone_data, function(i, obj) {
  if (pantoneSearchText == obj.name) {
    //update the DOM
    return false;
  } else {
    //clear the DOM
    return;}
  }

It's going to clear the DOM for every single object in your json data until it hits the searched object or the end of the array. That's probably not very efficient, especially if your json data is large. Hence the suggestion to use .find above.

Upvotes: 0

Barmar
Barmar

Reputation: 780673

Clear the previous data before you start searching.

Then when you're searching, use return false to end the $.each() loop once you've found a match (assuming there can only be one match).

When you're searching, set a variable to indicate that a match was found. After the loop, check the variable and display an appropriate message if nothing was found.

var pantone_data = (data) //data is the json from another file im importing
$('#pantoneSearch').focusout(function() {
  var pantoneSearchText = parseInt($('#pantoneSearch').val());
  // console.log(pantone_data)
  var found = false;
  $('#pantoneTitle').empty();
  $('.card-body span').empty();
  $.each(pantone_data, function(i, obj) {
    if (pantoneSearchText == obj.name) {
      console.log("it sure does")
      $('#pantoneTitle').append($('<h3>Pantone ' + obj.name + '</h3>'));

      $('#stock1').append($('<p>Stock Name: ' + obj.s1_name + '</p>'));
      $('#stock1').append($('<p>Stock Catagory: ' + obj.s1_catagory + '</p>'));
      $('#stock1').append($('<p>Pantone Match: ' + obj.s1_pantone_match + '</p>'));
      $('#stock1').append($('<p>Delta: ' + obj.s1_delta + '</p>'));

      $('#stock2').append($('<p>Stock Name: ' + obj.s2_name + '</p>'));
      $('#stock2').append($('<p>Stock Catagory: ' + obj.s2_catagory + '</p>'));
      $('#stock2').append($('<p>Pantone Match: ' + obj.s2_pantone_match + '</p>'));
      $('#stock2').append($('<p>Delta: ' + obj.s2_delta + '</p>'));
      found = true;
      return false;
    }
  });
  if (!found) {
    console.clear();
    console.log("nope");
  }
});

Upvotes: 1

Related Questions