I'm making a network viewer using Cytoscape JS, for which I need to give the styling through a JSON object. I want essentially a heat map kinda thing, so I'm selecting them on 255 categories, each with it's own colour. And since I'm not going to write 255 entries, I wanted to do it with a loop. However, the combining is giving me a headache and I can't really figure out where I'm being stupid.

var create_stylesheet = function(){
        var to_return =[
            {
                'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'}
            },
            {
                'selector': 'edge', 'style': {'label': 'data(score)'}
            }]; // <- this entry is for basic node labels and stuff. It needs to be first.
     
        //For loop that assigns a colour to each category.
        //As the red RGB value goes up, the blue RGB goes down. creating a gradient from cold to warm. 
        // In the program warmer colours have a higher score. 
        for(i = 0; i <= 255; i  ){
            var cat = `.cat_${i}`;
            var colour = `rgb(${i}, 0, ${255-i})`;
            var to_append =
               {
                   'selector': cat, 'style': {'line-color': colour}
               };

              //Here I'd like to add to_append to the to_return variable. 
        }
        

        return to_return; //Return the finished stylesheet.
    }

Thanks, I really appreciate the help.

EDIT: Thanks to the people thinking along with me. What I did wrong was trying to use several ways of doing it at once, which obviously didn't work. So I build everything nice and slowly, the inefficiency will give certain programmers sleepless nights but here's the working code:

var create_stylesheet = function(){
        let to_return = [];
        let first_line =
            {
                'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'}
            };
        let second_line =
            {
                'selector': 'edge', 'style': {'label': 'data(score)'}
            };
        let last_line = {
            'selector': ':selected',
            'style': {
                'background-color': 'SteelBlue', 'line-color': 'black', 'target-arrow-color': 'black', 'source-arrow-color': 'black'}
        };
        //Push the first two line into the array. 
        to_return.push(first_line);
        to_return.push(second_line);
        for(let i = 0; i <= 255; i  ){
            var cat = `.cat_${i}`;
            var colour = `rgb(${i}, 0, ${255-i})`;
            var to_append =
               {
                   'selector': cat, 'style': {'line-color': colour}
               };
            to_return.push(to_append); //Push each line into the array.
        }

        to_return.push(last_line); //add the last line.
        return to_return;
    }

CodePudding user response：

Two things to note.

1. In the for loop, you need let i = 0.
2. Then, you can just concat and return.

var create_stylesheet = function(){
        var to_return =[
            {
                'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'}
            },
            {
                'selector': 'edge', 'style': {'label': 'data(score)'}
            }]; // <- this entry is for basic node labels and stuff. It needs to be first.
     
        //For loop that assigns a colour to each category.
        //As the red RGB value goes up, the blue RGB goes down. creating a gradient from cold to warm. 
        // In the program warmer colours have a higher score. 
        for(let i = 0; i <= 255; i  ){
            var cat = `.cat_${i}`;
            var colour = `rgb(${i}, 0, ${255-i})`;
            var to_append =
               {
                   'selector': cat, 'style': {'line-color': colour}
               }; 

            to_return = to_return.concat(to_append);
        }
        
        return to_return;
    }

create_stylesheet()