Get values from array in order inside for

Question

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]}]}

The first value from the array, then the next value from array... — Henrique Mota
– Henrique Mota, Commented Aug 4, 2020 at 15:18

Minal Shah · Accepted Answer · 2020-08-04 15:27:04Z

1

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++;
                    
    
                }
            }
        }

edited Aug 4, 2020 at 15:27

answered Aug 4, 2020 at 15:18

Minal Shah

1,4861 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Henrique Mota Over a year ago

That seems not to work.. the I its the number (0, 1, 2, 3)...

Minal Shah Over a year ago

Hey I have edited the answer, please look into that.

Henrique Mota Over a year ago

Thats is working, but lets suppose I want it more flexible? that getColor(i%**4**) could be something like getColor(i%totalOfColors)?

Minal Shah Over a year ago

Yeah, that could work perfectly. you can use getColor(i%pallete.length) directly. If this is helpful, please upvote too so that others can use this.

Dropout · Accepted Answer · 2020-08-04 15:28:35Z

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.

amdev · Accepted Answer · 2020-08-04 15:40:51Z

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!

Collectives™ on Stack Overflow

Get values from array in order inside for

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related