CODEWITHSUNDEEP
javascripttypescriptvue.jsvuetify.js
Nszz
Nszz

Reputation: 147

How do I Map through object of Objects[Vuejs]

I want to create a mapping function as below : 

export const mapMetricsToValue: any = {
    item1: {
        0: 'green--text',
        0.3: 'red--text',
        0.45: 'orange--text',
    },
    item2:{
        0: 'yellow--text',
        0.5: 'blue--text',
        0.65: 'purple--text',
    }
};

export function getTextClass(metric: string, value: Number): string {
    return mapMetricsToValue(metric,value);
}

The idea is there can be different items(item1, item2...) and for each of these item values, there is a threshold color to define.. For eg :
for item1: 

-if (0<item1<0.3) it should return green, 
-if(0.3<item1<0.45) it should return red,
-else it should return orange

for item2, these thresholds are different and different colors. I want to create a function (getTextClass) which will return the color on the basis of the item and its threshold

Please help me out

Upvotes: 0

Views: 1143

Answers (1)

Sam Driver
Sam Driver

Reputation: 92

I would always recommend being able to adhere to a type/interface where possible. I would suggest extracting Metric and its container to interfaces like so:

export interface Metric {
    lowerBound: number;
    color: string;
}

export interface MetricItem {
    name: string;
    metrics: Metric[];
}

This way, you're more easily able to refer to these values by name if you need them later. We would then create mapMetricsToValue like so:

export const mapMetricsToValue: MetricItem[] = [
    {
        name: 'item1',
        metrics: [
            {
                lowerBound: 0,
                color: 'green'
            },
            {
                lowerBound: 0.3,
                color: 'red'
            }, //...
        ]
    },
    {
        name: 'item2',
        metrics: [
            {
                lowerBound: 0,
                color: 'yellow'
            } //...
        ]
    }
];

And then determining which colour maps to a given value would be as simple as iterating over the array of values for a given MetricItem and checking if the given value is greater than the current lowerBound and the next lowerBound. This if course will only work if the values are already ordered by lowerBound ascending, but this can be always be sorted by another function if required.

export function getTextClass(metric: MetricItem, value: number) : string {
    let metrics = metric.metrics;
    let len = metrics.length;

    for(let i = 0; i < len; i++) {
        let currentMetric = metrics[i];

        //if it's the last item in the array then we know it's above the lower bound
        if(i === len - 1) {
            return currentMetric.color;
        }

        let nextMetric = metrics[i + 1];

        if(currentMetric.lowerBound <= value && nextMetric.lowerBound > value) {
            return currentMetric.color;
        }
    }
}

To find the correct metric from it's name, we could use the following function:

export function findMetricByName(name: string, metrics: MetricItem[]): MetricItem {
    return metrics.find(metric => metric.name === name);
}

Upvotes: 1

Related Questions