CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionalert
LordQuackingStick
LordQuackingStick

Reputation: 105

Javascript Alert when no matching results from search query

I created a Chicago employee search index and wanted to create an alert when there are no matching records found, but can't seem to be able to find out what value I need to put in for when it's empty. Ideally, when the function get's submitted and no results are found, it would push an alert onto the screen indicating no matching records found.

The alert right now is located in the submit function in the last bit of code posted

ChicagoEmployeesQuery = function(searchKey) {
  var url,
    url =
    "https://data.cityofchicago.org/api/views/xzkq-xp2w/rows.json" +
    "?search=key_word&jsonp=?";
  this.query = url.replace("key_word", searchKey);
}

ChicagoEmployeesQuery.prototype.getList = function(callBack) {
  $.getJSON(this.query, function(response) {
    var i, results;
    results = [];
    for (i = 0; i < response.data.length; i += 1) {
      row = {
        name: response.data[i][8],
        title: response.data[i][9],
        department: response.data[i][10],
        salary: response.data[i][14]
      }
      results.push(row);
    }
    callBack(results);
  })
}
<!doctype html>

<html>

<head>
  <title>Salary Info Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="ChicagoEmployees.js"></script>
  <script src="demoLS.js"></script>
</head>

<body>
  <h1>Salary Info</h1>

  <p>Enter first or last name: <input type="text" id="key-word" size="20" /></p>

  <p><input type="button" id="start" value="Submit Query for name and Salary" /></p>
  <p><input type="button" id="start2" value="Submit Query for Names and Departments" </p>

    <h2>First Matching Employing + Salary</h2>
    <div id="result">
      First result appears here
    </div>

    <h2>List of All Matching Names</h2>
    <div id="names">
      All Matching Names Appear Here
    </div>

    <h2>List of All Matching Names + Departments</h2>
    <div id="namesDepartment">
      All Matching Names + Departments Appear Here
    </div>

</body>

</html>

// Use with demo.html
// Tested with jQuery 3.1.1, January 2017
// Updated January 2018

// This function is called when the response has returned
postResult = function(list) {
  //var nameList, i, glist;
  glist = list;
  if (list.length > 0) {
    $("#result").html(list[0].name + "<br />" + list[0].salary);
  }




  nameList = "";
  for (i = 0; i < list.length; i += 1) {
    nameList = nameList + list[i].name + "<br />";
  }
  $("#names").html(nameList);




}


postResult2 = function(list) {
  //var namesDepartmentList, i, glist;
  glist = list;
  if (list.length > 0) {
    $("#namesDepartment").html(list[0].name + "<br />" + list[0].department);
  }



  namesDepartmentList = "";
  for (i = 0; i < list.length; i += 1) {
    namesDepartmentList = namesDepartmentList + list[i].name + "<br/>" + list[i].department + "<br />";
  }
  $("#namesDepartment").html(namesDepartmentList);


}




submit = function() {
  var searchWord = document.getElementById("key-word").value;
  query = new ChicagoEmployeesQuery(searchWord);
  $("#result").html("waiting...");
  query.getList(postResult);
  if (searchKey.isEmpty()) {
    alert("No Matching Records Found");
    console.log("A result should appear!");
  }
}


submit2 = function() {
  var searchWord = document.getElementById("key-word").value;
  query = new ChicagoEmployeesQuery(searchWord);
  $("#namesDepartment").html("waiting...");
  query.getList(postResult2);
  console.log("A result should appear now!");
}

$(function() {
  $("#start").click(submit);
});

$(function() {
  $("#start2").click(submit2);
});

Upvotes: 0

Views: 440

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

If I understand your question correctly, you can check if there's any matching data at the end of the getlist()

ChicagoEmployeesQuery.prototype.getList = function(callBack) {
  $.getJSON(this.query, function(response) {
    // ... codes ...
    callBack(results);

    // like this
    if (response.data.length==0) {
      alert("No Matching Records Found");
      console.log("A result should appear!");
    }
  })
}


// Use with demo.html
// Tested with jQuery 3.1.1, January 2017
// Updated January 2018

// This function is called when the response has returned
postResult = function(list) {
  //var nameList, i, glist;
  glist = list;
  if (list.length > 0) {
    $("#result").html(list[0].name + "<br />" + list[0].salary);
  }
  nameList = "";
  for (i = 0; i < list.length; i += 1) {
    nameList = nameList + list[i].name + "<br />";
  }
  $("#names").html(nameList);
}


postResult2 = function(list) {
  //var namesDepartmentList, i, glist;
  glist = list;
  if (list.length > 0) {
    $("#namesDepartment").html(list[0].name + "<br />" + list[0].department);
  }
  namesDepartmentList = "";
  for (i = 0; i < list.length; i += 1) {
    namesDepartmentList = namesDepartmentList + list[i].name + "<br/>" + list[i].department + "<br />";
  }
  $("#namesDepartment").html(namesDepartmentList);
}




submit = function() {
  var searchWord = document.getElementById("key-word").value;
  query = new ChicagoEmployeesQuery(searchWord);
  $("#result").html("waiting...");
  query.getList(postResult);
}


submit2 = function() {
  var searchWord = document.getElementById("key-word").value;
  query = new ChicagoEmployeesQuery(searchWord);
  $("#namesDepartment").html("waiting...");
  query.getList(postResult2);
  console.log("A result should appear now!");
}

$(function() {
  $("#start").click(submit);
});

$(function() {
  $("#start2").click(submit2);
});

ChicagoEmployeesQuery = function(searchKey) {
  var url,
    url =
    "https://data.cityofchicago.org/api/views/xzkq-xp2w/rows.json" +
    "?search=key_word&jsonp=?";
  this.query = url.replace("key_word", searchKey);
}

ChicagoEmployeesQuery.prototype.getList = function(callBack) {
  $.getJSON(this.query, function(response) {
    var i, results;
    results = [];
    for (i = 0; i < response.data.length; i += 1) {
      row = {
        name: response.data[i][8],
        title: response.data[i][9],
        department: response.data[i][10],
        salary: response.data[i][14]
      }
      results.push(row);
    }
    callBack(results);
    if (response.data.length==0) {
      alert("No Matching Records Found");
      console.log("A result should appear!");
    }
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Salary Info</h1>

  <p>Enter first or last name: <input type="text" id="key-word" size="20" /></p>

  <p><input type="button" id="start" value="Submit Query for name and Salary" /></p>
  <p><input type="button" id="start2" value="Submit Query for Names and Departments" </p>

    <h2>First Matching Employing + Salary</h2>
    <div id="result">
      First result appears here
    </div>

    <h2>List of All Matching Names</h2>
    <div id="names">
      All Matching Names Appear Here
    </div>

    <h2>List of All Matching Names + Departments</h2>
    <div id="namesDepartment">
      All Matching Names + Departments Appear Here
    </div>

Upvotes: 1

Related Questions