如何在 Javascript 中组合复杂的 JSON 对象

Nils 发表于 Dev

尼尔斯

我正在使用 Cytoscape JS 制作网络查看器，为此我需要通过 JSON 对象提供样式。我基本上想要一个热图，所以我在 255 个类别中选择它们，每个类别都有自己的颜色。由于我不打算写 255 个条目，所以我想用循环来完成。然而，这种结合让我头疼，我真的不知道我在哪里愚蠢。

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

谢谢，非常感谢您的帮助。

编辑：感谢和我一起思考的人。我做错的是试图同时使用几种方法，这显然行不通。所以我慢慢地构建了一切，效率低下会让某些程序员不眠之夜，但这里是工作代码：

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

他阉割了

有两点需要注意。

在 for 循环中，您需要let i = 0.
然后，您可以连接并返回。

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()

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。