CODEWITHSUNDEEP
javascriptreactjs
Henrique Mota
Henrique Mota

Reputation: 144

Get values from array in order inside for

I have this array in react

const pallete = ['#5931B5', '#7842F5', '#2EABE3', '#F2711C']

I want to create a function that will return the first hex, and then the second...

getColor(){
   //What code should I have here?
   return COLOR
}

This is my main function

updateArray(data){
        const dataAux = data;
        for(var key in dataAux.datasets) {
            if (typeof dataAux.datasets[key].backgroundColor == 'undefined'){
               //I want here to take the values from the first array (pallete) and give dataAux.datasets[key]... the first color, then when he reads it again the second one...

                for(var i in pallete){
                    dataAux.datasets[key].backgroundColor = getColor(color????);
                }

            }
        }
    }

The const Data have an array of objects something like this:

{labels: [1, 2, 3], datasets: [{label: 'Undefined', pointStyle: 'line', borderColor: pallete[0],borderWidth: 3,yAxisID: "bar-y-axis",data: [1, 2, 3]},{label: 'Undefined',backgroundColor: pallete[1],pointStyle: 'line',borderColor: pallete[1],borderWidth: 3,yAxisID: "bar-y-axis",data: [2, 4, 6]}]}

Upvotes: 0

Views: 52

Answers (3)

amdev
amdev

Reputation: 7442

if you want to get each color on each call of function you can leverage the generator function functionality like below to get each color on each iteration of your loop:

const pallete = ['#5931B5', '#7842F5', '#2EABE3', '#F2711C']

function* getColor(arr) {
  for (let i = 0; i < arr.length ; i++) {
    yield arr[i]
  }
}

const iterator = getColor(pallete)

console.log(iterator.next()) // { value:  '#5931B5', done: false }
console.log(iterator.next()) // { value:  '#7842F5', done: false }
console.log(iterator.next()) // { value:  '#2EABE3', done: false }
console.log(iterator.next()) // { value:  '#F2711C', done: false }
console.log(iterator.next()) // { value:  undefined, done: true }

in your case, you can call the iterator.next() value inside of your loop until it reaches the undefined condition and then you need to break the loop!

Upvotes: 0

Dropout
Dropout

Reputation: 13866

This might be an overkill, but you can create an object with "memory" to provide you with colors.

function ColorProvider(){
    var _this=this;

    _this.colors = ['#5931B5', '#7842F5', '#2EABE3', '#F2711C'];
    _this.currentIndex = 0;

    _this.getNext = function() {
        let returnedColor = _this.colors[_this.currentIndex];
        if(_this.currentIndex == _this.colors.length-1){
            _this.currentIndex = 0;
        } else {
            _this.currentIndex++;
        }
    }
}


let color = new ColorProvider();
dataAux.datasets[key].backgroundColor = getColor(color.getNext());

Excuse my archaic JavaScript practices, it's just a POC. I'm sure there is a more modern/slick to go around this, the point is having an object for it instead of primitives.

Upvotes: 0

Minal Shah
Minal Shah

Reputation: 1486

There is no need to declare the other function to get the color. You can use the following code to get the color and set that as background.

getColor(index){
   //What code should I have here?
   return pallete[index];
}

updateArray(data){
            const dataAux = data;
            var i=0;
            for(var key in dataAux.datasets) {
                if (typeof dataAux.datasets[key].backgroundColor == 'undefined'){
                   //I want here to take the values from the first array (pallete) and give dataAux.datasets[key]... the first color, then when he reads it again the second one...
    
                   
                        dataAux.datasets[key].backgroundColor = getColor(i%4);
                       i++;
                    
    
                }
            }
        }

Upvotes: 1

Related Questions