Сравните переменную с объектом и верните элемент в соответствии с разницей значений

Question

Так как я не очень хорош в JS, я буду признателен за помощь здесь ...

У меня есть этот массив:

segments = [
    { state: 33, color: "red" },
    { state: 66, color:"yellow" },
    { state: 100, color: "green" }
]

Три переменные:

goal = 100
currentValue = 26
percentage = currentValue * 100 / goal

Я пытаюсь написать функцию, которая сравнивает процент и состояние в объекте и возвращает цвет, который сопровождает состояние. Например:

Если процент <33, должен возвращать «красный». </p>

Если процент находится между 33 и 66, должен возвращать «yelow».

Если процент> 66 или> цель, должен вернуть "зеленый".

Пока у меня есть это, но оно не работает:

defineChartColor = (currentActivity, goal) => segments.find(segments => segments.state > percentage).color

Answer 1

Вы должны проверить state, а не value объекта с помощью <=. Знак равенства важен для нахождения точных значений, например, последнего из 100.

var segments = [{ state: 33, color: "red" }, { state: 66, color:"yellow" }, { state: 100, color: "green" }],
    goal = 100,
    currentValue = 26,
    percentage = currentValue * 100 / goal,
    getColor = (percentage, goal) => segments.find(({ state }) => percentage === goal
        ? state === 100
        : percentage <= state 
    ).color;

console.log(getColor(33, 100));
console.log(getColor(66, 100));
console.log(getColor(100, 100));
console.log(getColor(20, 20));