将ForEach从JQuery转换为Javascript

因此，我希望在我正在处理的项目上放弃Jquery依赖，因此我正在重写一些代码

$.getJSON( "data.php", function( data ) {
  if(!Object.keys(data).length){
     document.getElementById('MOStatus').innerHTML = 'No';
 }
 else{
    document.getElementById('MOStatus').innerHTML = data.length;
    $redwarnings = 0;
    $amberwarnings = 0;
    $yellowwarnings = 0;
  $.each( data, function( key, val ) {
    switch(this.warningLevel) {
    case "yellow":
        $yellowwarnings++;
        warningColor = '#FFE923';
    break;
    case "amber":
        $amberwarnings++;
        warningColor = '#ff9900';
    break;
    case "red":
        $redwarnings++;
        warningColor = '#cc0033';
    break;
    default:
    break;
    }
  });

我将其改写为：

var request = new XMLHttpRequest();
request.open('GET', 'data.php', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
    if(!Object.keys(data).length) {
        document.getElementById('MOStatus').innerHTML = 'No';
    }
    else {
        document.getElementById('MOStatus').innerHTML = data.length;
    $redwarnings = 0;
        $amberwarnings = 0;
        $yellowwarnings = 0;
    for (var warningLevel in data) {
        switch(data[warningLevel]) {
            case "yellow":
                    $yellowwarnings++;
                warningColor = '#FFE923';
            break;
            case "amber":
                    $amberwarnings++;
                    warningColor = '#ff9900';
            break;
            case "red":
                    $redwarnings++;
                    warningColor = '#cc0033';
            break;
            default:
            break;
        }
    }

    } //Closes the else that comes into play if array is not empty.


  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

var-request=new-XMLHttpRequest（）；
open（'GET'，'data.php'，true）；
request.onload=函数（）{
如果（this.status>=200&&this.status<400）{
//成功！
var data=JSON.parse（this.response）；
if（！Object.keys（data.length）{
document.getElementById（'MOStatus'）。innerHTML='No'；
}
否则{
document.getElementById（'MOStatus'）。innerHTML=data.length；
$redwarnings=0；
$amberwarnings=0；
$yellowwarnings=0；
用于（数据中的var警告级别）{
开关（数据[警告级别]）{
案例“黄色”：
$yellowwarnings++；
警告颜色=#FFE923'；
打破
案件“琥珀色”：
$amberwarnings++；
警告颜色='ff9900'；
打破
案例“红色”：
$redwarnings++；
警告颜色='cc0033'；
打破
违约：
打破
}
}
}//如果数组不为空，则关闭起作用的else。
}否则{
//我们到达了目标服务器，但它返回了一个错误
}
};
request.onerror=函数（）{
//出现了某种连接错误
};
request.send（）；

问题在于，它正确地计算了数据的长度，但似乎没有对其进行迭代，也没有计算红色、黄色和琥珀色警告的数量

---

我怀疑我没有正确引用Javascript中的键/值-正如您在依赖Jquery的代码中看到的那样，this.warningLevel可以正常工作，但在非依赖Jquery的代码中不起作用。

data

是一个对象数组，因此

data[warningLevel]

会给你一个对象：

切换

切换它不会给你想要的颜色。首先从对象中提取属性：

for (const { warningLevel } of data) {
  switch(warningLevel) {
    // rest of your switch code
  }
}

但一个不太重复的选项是使用一个对象，其关键点是颜色，而不是3个类似的独立变量：

const warnings = {
  yellow: 0,
  amber: 0,
  red: 0
};
for (const { warningLevel } of data) {
  warnings[warningLevel]++;
}

然后，例如，参考

warnings.yellow

、

warnings.amber

和

warnings.red

而不是独立变量

$amberwarnings

等

---

（因为它看起来好像没有使用

warningColor

，所以您可以忽略它）

data

是一个对象数组，所以

data[warningLevel]

会给您一个对象：

切换它不会给您想要的颜色。首先从对象中提取属性：

for (const { warningLevel } of data) {
  switch(warningLevel) {
    // rest of your switch code
  }
}

但一个不太重复的选项是使用一个对象，其关键点是颜色，而不是3个类似的独立变量：

const warnings = {
  yellow: 0,
  amber: 0,
  red: 0
};
for (const { warningLevel } of data) {
  warnings[warningLevel]++;
}

然后，例如，参考
warnings.yellow
、
warnings.amber
和
warnings.red
而不是独立变量
$amberwarnings
等

（因为它看起来好像没有使用
warningColor
，您可以省略它）
您可以保留原始代码并使用
数据。forEach（function（val，key）{…
（注意这里，
key
和
val
的顺序与jQuery不同）不幸的是，这是我尝试的第一件事，但它没有起作用：（您可以保留原始代码并使用
data.forEach（function（val，key）{…
（注意这里，
key
和
val
的顺序与jQuery不同）不幸的是，这是我尝试的第一件事，但没有起作用：(