如何比较 Firebase 实时数据库的两个孩子？

Question

根据data.key === "high_temp_coil" 的结果，我将数据打印到我的网页中，data.val() 如下所示：

var deviceRef = app.database().ref('/'+localStorage.getItem('machineid'));
deviceRef.on('child_added', function(data) {
  if (data.key === 'high_temp_coil') {
    $('#high_temp_coil .value').html(data.val())
  }
  if (data.key === 'low_temp_coil') {
    $('#low_temp_coil .value').html(data.val());
  }
}

在我的代码中high_temp_coil代表线圈的高温，low_temp_coil代表线圈的低温，在我的数据库中每个都有自己的字段。但是，由于制造问题，有时高温和低温是倒退的，我需要在打印数据之前弄清楚这一点。这就是我尝试这样做的方式，但它不起作用：

if (data.key === "high_temp_coil"){
  let valueh= data.val(); 
  if (data.key === "low_temp_coil"){
    let valuel= data.val()
    console.log(valueh);
    console.log(valuel);
  }
}

这是我的数据库中的数据：

{
  "MachineNo": {
    "water": "value"
    "high_temp_coil": "value"
    "low_temp_coil": "value"
  }
}

Answer 1

当您使用child_added 事件侦听器时，只要该数据库位置下的其中一个子节点发生更改，就会调用您的回调。使用它，您需要将high_temp_coil 和low_temp_coil 存储在函数外部的变量中，以便正确比较它们。因为您将结果存储在一个元素中，所以您可以从那里提取当前值。

注意： 在下面的 sn-ps 中，我遵循将 DataSnapshot 对象命名为 snapshot 的约定，为 snapshot.val() 返回的纯 JavaScript 对象保留 data。这有助于防止以后出现混淆，尤其是在不使用 TypeScript 时。

var deviceRef = app.database().ref('/'+localStorage.getItem('machineid'));
deviceRef.on('child_added', function(snapshot) {
  if (snapshot.key === 'high_temp_coil') {
    const newHighTempValue = snapshot.val();
    const lowTempValue = $('#low_temp_coil .value').html();
    if (Number(newHighTempValue) >= Number(lowTempValue)) { // <- assuming the values are numeric and not written as "52.1°C"
      // new value is higher than current value
      $('#high_temp_coil .value').html(newHighTempValue)
    } else {
      // new value is lower than current value, swap places
      $('#high_temp_coil .value').html(lowTempValue)
      $('#low_temp_coil .value').html(newHighTempValue)
    }
  }
  if (snapshot.key === 'low_temp_coil') {
    const newLowTempValue = snapshot.val();
    const highTempValue = $('#high_temp_coil .value').html();
    if (Number(newLowTempValue) < Number(highTempValue)) { // <- assuming the values are numeric and not written as "52.1°C"
      // new value is lower than current value
      $('#low_temp_coil .value').html(newLowTempValue)
    } else {
      // new value is higher than current value, swap places
      $('#low_temp_coil .value').html(highTempValue)
      $('#high_temp_coil .value').html(newLowTempValue)
    }
  }
}

上述代码的主要问题是child_added 事件会在页面加载时触发一次，并且不会从任何更新数据的传感器获得实时更新，因为这些更改会触发child_changed 事件。

但是，对于您的数据结构，您可以改用listening to value events 大大简化您的代码。每次更新该位置下的任何数据时都会触发这些侦听器 - 包括创建机器时以及温度的任何变化。此外，由于数据在树中更高一级，因此您可以直接在快照中访问最新的 high_temp_coil 和 low_temp_coil 值。此侦听器的权衡是您需要确保处理data does not exist (snapshot.exists()===false) 的时间，因为child_added 侦听器只会在数据被创建且保证存在的地方被调用。

var deviceRef = app.database().ref('/'+localStorage.getItem('machineid'));
deviceRef.on(
  'value',
  function(snapshot) {
    if (!snapshot.exists()) {
      // TODO: handle machine does not exist
      console.error(`Machine ${localStorage.getItem('machineid')} does not exist in database`);
      return;
    }

    const data = snapshot.val();
    const highTempValue = data.high_temp_coil;
    const lowTempValue = data.low_temp_coil;

    if (Number(highTempValue) >= Number(lowTempValue)) { // <- assuming the values are numeric and not written as "52.1°C"
      $('#high_temp_coil .value').html(highTempValue)
      $('#low_temp_coil .value').html(lowTempValue)
    } else {
      $('#high_temp_coil .value').html(lowTempValue)
      $('#low_temp_coil .value').html(highTempValue)
    }
  },
  (error) => {
    // TODO: implement better error handling
    console.error("Listener was cancelled due to an error:", error);
  }
);