How to combine complicated JSON objects in Javascript

Question

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

Why are you writing the JSON? Just create standard JS objects and then use JSON.stringify() to get the JSON at the end. — Scott Marcus
– Scott Marcus, Commented Jun 14, 2022 at 15:27
Your to_return variable is an array so why not just push the new to_append values to it. to_return.push(to_append) — Timur
– Timur, Commented Jun 14, 2022 at 15:28
push() worked. I think I tried to work to fast or something. Push() was the first thing I tried but the type of to_return wasn't correct. But it works now :) — Nils
– Nils, Commented Jun 14, 2022 at 17:30

distro · Accepted Answer · 2022-06-14 17:43:09Z

2

Two things to note.

In the for loop, you need let i = 0.
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()

edited Jun 14, 2022 at 17:43

answered Jun 14, 2022 at 15:30

distro

7242 gold badges11 silver badges26 bronze badges

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

1 Comment

Nils Over a year ago

I ended up using push(). But I also read your note and using var instead of let was kinda messy of me. Especially when declaring it in a for loop.

Collectives™ on Stack Overflow

How to combine complicated JSON objects in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related