How to compare two values with other three values аnd to visualize all the rows that meet the condition using vanilla js

I need to make a flood warning system and compare two values level_11 and level_fw with these three values ALERT_yewoll ALERT_orange and ALERT_red from this api.

For now I do the check this way, but when I replace MikeAllData.ALERT_yewoll with manual value for example 225.50 (this is for [0] index in the rows) I see only one row, but I need to see all rows which meet the condition.

const urlCheckForWarnings = 'http://194.141.118.43:3010/alldata';
// Create Asynchronous function to grab the data 
async function getDataWarningsMikeFW() {
try {
// We are using fetch to get the response
const responseAllData = await fetch(urlCheckForWarnings);
const allDataModels = await responseAllData.json();
// Trigger the listData function and pass the result
listValues(allDataModels);
console.log(allDataModels);
} catch (error) {
console.log(error);
}
}
function listValues(allDataModels) {
// Loop through each result and append the data.
allDataModels.floodguard_alldata.rows.map(function (AllData, i) {
const formatDate = "YYYY-MM-DD HH:mm:ss";
if (AllData.level_11 >= 222.50 /*MikeAllData.ALERT_yewoll*/ && AllData.level_11 < 222.50 /*MikeAllData.ALERT_orange*/) {
document.getElementById("mikeFWwarnings").innerHTML = "Предупреждение 1: Жълт код за: " + AllData.substring + " за дата: " + moment(AllData.date).format(formatDate);
}
if (AllData.level_11 >= AllData.ALERT_orange && AllData.level_11 < AllData.ALERT_red) {
document.getElementById("mikeFWwarnings").innerHTML = "Предупреждение 2: Оранжев код за: " + AllData.substring + " за дата: " + moment(AllData.date).format(formatDate);
}
if (AllData.level_11 >= AllData.ALERT_red) {
document.getElementById("mikeFWwarnings").innerHTML = "Предупреждение 3: Червен код за: " + AllData.substring + " за дата: " + moment(AllData.date).format(formatDate);
}
if (AllData.level_fw >= 222.50 /*MikeAllData.ALERT_yewoll*/ && AllData.level_fw < 222.50 /*MikeAllData.ALERT_orange*/) {
document.getElementById("mikeFWwarnings").innerHTML = "Предупреждение 1: Жълт код за: " + AllData.substring + " за дата: " + moment(AllData.date).format(formatDate);;
}
if (AllData.level_fw >= AllData.ALERT_orange && AllData.level_fw < AllData.ALERT_red) {
document.getElementById("mikeFWwarnings").innerHTML = "Предупреждение 2: Оранжев код за: " + AllData.substring + " за дата: " + moment(AllData.date).format(formatDate);;
}
if (AllData.level_fw >= AllData.ALERT_red) {
document.getElementById("mikeFWwarnings").innerHTML = "Предупреждение 3: Червен код за: " + AllData.substring + " за дата: " + moment(AllData.date).format(formatDate);;
}
});
};
getDataWarningsMikeFW();

The condition I have to do is if values of level_fw and level_11 are in the range between ALERT_yewoll ALERT_orange and ALERT_red To set Code 1, Code 2 or Code 3 warning messages.

I'm not sure if my check is correct and how can I visualize all indexes that meet the condition and not just the first index?

Ok, here's a pretty rough and ready example of how you can add and remove elements on your page and populate the correct elements with the right warnings.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// CONSTANTS
let YELLOW = 500;
let ORANGE = 750;
let RED = 1000;
// DATA
let dataSetOne = [
{"level_11": 600, "level_fw": 800},
{"level_11": 800, "level_fw": 400},
{"level_11": 400, "level_fw": 1200}
];
let dataSetTwo = [
{"level_11": 200, "level_fw": 400},
{"level_11": 1200, "level_fw": 700},
{"level_11": 300, "level_fw": 800},
{"level_11": 1200, "level_fw": 1200},
{"level_11": 800, "level_fw": 600},
]
// ELEMENTS
let warningBox = document.getElementById("warningBox");
// BUTTONS
document.getElementById("buttonOne").addEventListener("click", () => listValues(dataSetOne))
document.getElementById("buttonTwo").addEventListener("click", () => listValues(dataSetTwo))
// FUNCTIONS
function listValues(allDataModels) {
getRightNumberOfWarningElements(allDataModels);
allDataModels.forEach ((data, index) =>
fillInRowWarnings(data, index + 1)
)
}
function fillInRowWarnings(data, row) {
let element_11 = document.getElementById(warningRowChildId(row, "11"))
let element_fw = document.getElementById(warningRowChildId(row, "fw"))
element_11.innerText = getWarningText(data.level_11);
element_fw.innerText = getWarningText(data.level_fw);
}
function getWarningText(value) {
if (value < YELLOW)
return "No warning"
else if (value < ORANGE)
return "Yellow warning"
else if (value < RED)
return "Orange warning"
else return "Red warning"
}
function getRightNumberOfWarningElements(allDataModels) {
if (allDataModels.length > warningBox.childElementCount)
addWarningElements(warningBox.childElementCount, allDataModels.length);
if (allDataModels.length < warningBox.childElementCount)
removeWarningElements(warningBox.childElementCount, allDataModels.length);
}
function addWarningElements(from, to) {
for (i = from + 1; i<= to; i++)
warningBox.appendChild(createWarningRow(i))
}
function removeWarningElements(from, to) {
for (i = from; i>= to + 1; i--)
warningBox.removeChild(warningBox.lastChild)
}
function createWarningRow(number) {
let row = document.createElement("div")
row.setAttribute("id", "warningRow" + number);
let rowTitle = document.createElement("h4");
rowTitle.innerText = "Row " + number;
row.appendChild(rowTitle);
addSubTitle(row, "11")
addNewRowChild(row, number, "11");
addSubTitle(row, "fw")
addNewRowChild(row, number, "fw");
return row;
}
function addSubTitle(row, subTitleText) {
let subTitle = document.createElement("h5");
subTitle.innerText = "Level " + subTitleText;
row.appendChild(subTitle);
}
function addNewRowChild(row, rowNumber, levelType) {
let newChild = document.createElement("p")
newChild.setAttribute("id", warningRowChildId(rowNumber, levelType));
row.appendChild(newChild)
}
function warningRowChildId(rowNumber, levelType) {
return "warningRow_" + rowNumber + "_level_" + levelType
}

<!-- language: lang-html -->

<html>
<body>
<button type="button" id="buttonOne">Data set one</button>
<button type="button" id="buttonTwo">Data set two</button>
<div id="warningBox"></div>
</body>
</html>

<!-- end snippet -->