?
Solved

Parse and add to JSON new elements on children nodes

Posted on 2012-09-04
5
Medium Priority
?
554 Views
Last Modified: 2012-09-05
Hi Experts!

I have the following JSON and an array with color elements. As one see the main parent has 2 nodes. I would like to add to its children a property called "color" which will have the value from the array. For child one the first array value and so on.

Next is that the all children will inherit their parent color and modify it to a brighter one.
So for example parent[0] : child[0] -> color #ff0000
              parent[0] : child[0] : child [0] -> color #ff0001 and so on

Can someone help me with the javascript code to achieve this new JSON?

var colorScheme = ['#ff0000', '#ff00ff'];
{
    "name":"data",
    "i":0,
    "children":[
        {
            "name":"data1",
            "i":1,
            "children":[
                {
                    "name":"data11",
                    "i":11,
                    "children":[
                        {
                            "name":"data111",
                            "i":111,
                            "children":[
                                {
                                    "name":"data1111",
                                    "i":1111
                                }
                            ]
                        },
                        {
                            "name":"data112",
                            "i":112,
                            "children":[
                                {
                                    "name":"data1121",
                                    "i":1121
                                },
                                {
                                    "name":"data1122",
                                    "i":1122
                                }
                            ]
                        }
                    ]
                },
                {
                    "name":"data12",
                    "i":12,
                    "children":[
                        {
                            "name":"data121",
                            "i":121,
                            "children":[
                                {
                                    "name":"data1211",
                                    "i":1211
                                },
                                {
                                    "name":"data1212",
                                    "i":1212
                                }
                            ]
                        },
                        {
                            "name":"data122",
                            "i":122,
                            "children":[
                                {
                                    "name":"data1221",
                                    "i":1221
                                },
                                {
                                    "name":"data1222",
                                    "i":1222
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "name":"data2",
            "i":2,
            "children":[
                {
                    "name":"data21",
                    "i":21,
                    "children":[
                        {
                            "name":"data211",
                            "i":211,
                            "children":[
                                {
                                    "name":"data2111",
                                    "i":2111
                                }
                            ]
                        },
                        {
                            "name":"data212",
                            "i":212,
                            "children":[
                                {
                                    "name":"data2121",
                                    "i":2121
                                }
                            ]
                        }
                    ]
                },
                {
                    "name":"data22",
                    "i":22,
                    "children":[
                        {
                            "name":"data221",
                            "i":221,
                            "children":[
                                {
                                    "name":"data2211",
                                    "i":2211
                                },
                                {
                                    "name":"data2212",
                                    "i":2212
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Open in new window


New JSON will look like:

var colorScheme = ['#ff0000', '#ff00ff'];
{
    "name":"data",
    "i":0,
    "children":[
        {
            "name":"data1",
            "i":1,
              "color": "#ff0000"
            "children":[
                {
                    "name":"data11",
                    "i":11,
                    "color": "#ff0001"
                    "children":[
                        {
                            "name":"data111",
                            "i":111,
                             "color": "#ff0002"
                             "children":[
                                {                                    
                                   "color": "#ff0003"
                                   "name":"data1111",
                                    "i":1111
                                }
                            ]
                        },
                        {
                            "name":"data112",
                           "color": "#ff0011"

                            "i":112,
                            "children":[
                                {
                                    "name":"data1121",
                                    "i":1121
                                },
                                {
                                    "name":"data1122",
                                    "i":1122
                                }
                            ]
                        }
                    ]
                },
                {
                    "name":"data12",
                    "i":12,
                    "children":[
                        {
                            "name":"data121",
                            "i":121,
                            "children":[
                                {
                                    "name":"data1211",
                                    "i":1211
                                },
                                {
                                    "name":"data1212",
                                    "i":1212
                                }
                            ]
                        },
                        {
                            "name":"data122",
                            "i":122,
                            "children":[
                                {
                                    "name":"data1221",
                                    "i":1221
                                },
                                {
                                    "name":"data1222",
                                    "i":1222
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "name":"data2",
            "i":2,
            "children":[
                {
                    "name":"data21",
                    "i":21,
                    "children":[
                        {
                            "name":"data211",
                            "i":211,
                            "children":[
                                {
                                    "name":"data2111",
                                    "i":2111
                                }
                            ]
                        },
                        {
                            "name":"data212",
                            "i":212,
                            "children":[
                                {
                                    "name":"data2121",
                                    "i":2121
                                }
                            ]
                        }
                    ]
                },
                {
                    "name":"data22",
                    "i":22,
                    "children":[
                        {
                            "name":"data221",
                            "i":221,
                            "children":[
                                {
                                    "name":"data2211",
                                    "i":2211
                                },
                                {
                                    "name":"data2212",
                                    "i":2212
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Open in new window

0
Comment
Question by:dlcnet
  • 3
  • 2
5 Comments
 
LVL 25

Expert Comment

by:lwadwell
ID: 38366659
Was it something like this you wanted?  See attached.
index.html
0
 

Author Comment

by:dlcnet
ID: 38367064
Hi  lwadwell!

yes it almost is. For the 2nd root child I need the 2nd value from the array.
"name": data1 -> colorScheme[0]
"name":data2 -> colorScheme[1]

Could you update this in your code?
Thank you!
0
 
LVL 25

Accepted Solution

by:
lwadwell earned 2000 total points
ID: 38367181
I wondered why there was two in the color array.
Replace the loop in the init() with this:
    // Loop over
    var i = 0;
    for (var child in json.children) {
        addColor(json.children[child],hex2RGB(colorScheme[i]));
        i++;
        if ( colorScheme[i] == undefined ) i = 0;
    }

Open in new window

0
 

Author Closing Comment

by:dlcnet
ID: 38367211
great response
0
 

Author Comment

by:dlcnet
ID: 38367214
@lwadwell
Thank you :) I have omitted something from my json though that had played an important role. I will post an updated new question based on this one. So if you want 500 more points :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question