如何在API返回数据中无指定邮箱时弹出‘Email not found’提示？

解决方案 #

你只需要在获取API返回的data后，先判断数组是否为空（没找到匹配邮箱时SheetDB会返回空数组），如果为空就弹出提示并终止后续表格生成逻辑就行。

修改后的完整代码 #

JavaScript部分

async function search() {
  const email = document.getElementById("email").value.trim();
  if (!email) return alert("error.");
  const url = `https://sheetdb.io/api/v1/i3dp73wvi19kf/search?EMAIL=${email}`;
  const token = "my-api-key";
  const method = "GET";
  try {
    const res = await fetch(url, {
      method,
      headers: {
        "Authorization": `Bearer ${token}`
      }
    });

    if (!res.ok) throw new Error("Result not OK");
    const data = await res.json();

    // 新增：判断是否找到匹配邮箱
    if (data.length === 0) {
      alert('Email not found');
      document.getElementById("output").innerHTML = ""; // 清空搜索提示
      return; // 终止后续逻辑
    }

    // if api didnt respond use this instead data to generate result
    // 测试备用数据时，需给jsondata添加同样的判断逻辑
    // var jsondata = [{
    //   "CARGO": "JEFE",
    //   "CIUDAD": "CIUDAD1",
    //   "EMAIL": "jperez",
    //   "Función": "OPERACIONES",
    //   "NOMBRE": "JUAN PEREZ",
    //   "Unidad organizativa": "OPERACIONES"
    // }]
    let text = ""
    var output = document.getElementById("output");
    output.innerHTML = "Searching...";
    var keys = [];
    text += "<table border=\"1\"><tr>";
    for (key in data[0]) {
      text += '<td>' + key + '</td>';
    }
    text += "</tr>";
    for (var i = 0; i < data.length; i++) {
      text += '<tr>';
      for (key in data[i]) {
        text += '<td>' + data[i][key] + '</td>';
      }
      text += '</tr>';
    }
    text += "</table>";

    output.innerHTML = text;
  } catch (err) {
    alert(err);
  }
}

HTML部分

<form onsubmit="search(); event.preventDefault(); return false">
  <label>EMAIL: <input type=search id="email"></label>
  <button type=submit>Search</button>
</form>
<hr />
<div id=output></div>

关键修改说明 #

• 在确认API响应正常并拿到data后，新增if (data.length === 0)判断：SheetDB的search接口无匹配结果时会返回空数组，通过数组长度即可判断是否找到目标邮箱。
• 弹出提示后清空输出区域并终止函数，避免生成空表格干扰用户。
• 若要测试备用的jsondata，需给它添加相同的空数组判断逻辑。

内容的提问来源于stack exchange，提问作者chris_fv