Static Array Declaration and Initialization

Question

I am learning JS from scratch and implementing HighCharts code using JS. Seeing one of the demo I see a variable data array declaration like below:

        data = [{
        y: 55.11,
        color: colors[0],
        drilldown: {
           name: 'MSIE versions',
           categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
           data: [{
               y: 33.06,
               drilldown: {
                   name: 'drilldown next level',
                   categories: ['a', 'b', 'c'],
                   data: [23,54,47],
                   color: colors[0]
               }
           }, 10.85, 7.35, 2.41],
           color: colors[0]
        }
     }, {
         y: 21.63,
        color: colors[1],
        drilldown: {
           name: 'Firefox versions',
           categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
           data: [13.52, 5.43, 1.58, 0.83, 0.20],
           color: colors[1]
        }
     }];

What does this 'data' array declaration means?

It's initilize an array of objects. what else can we way?

gdoron
– gdoron

2012-03-16 00:21:49 +00:00
Commented Mar 16, 2012 at 0:21 — gdoron
– gdoron, Commented Mar 16, 2012 at 0:21

Jere · Accepted Answer · 2012-03-16 00:35:18Z

1

It is an array with two elements, each one an object. Those are declared in object literal notation. For instance, the second element is this:

{
    y: 21.63,
    color: colors[1],
    drilldown: {
       name: 'Firefox versions',
       categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
       data: [13.52, 5.43, 1.58, 0.83, 0.20],
       color: colors[1]
    }
 }

This object is composed of various properties. For instance, the property "y" has the value 21.63. The property "drilldown" is another object and so on. Primitives, arrays, and objects can be embedded ad infinitum.

Furthermore, I can deduct that data[ 0 ] and data[ 1 ] appear to be similar objects since they have the same properties.

One thing that may help if you're having a hard time seeing the structure is being very strict about your code style, especially indentation. I've reworked it a little bit and shown a very generous spacing. It takes up more lines, but it should be clearer what is related.

data = [
    {
        y: 55.11,
        color: colors[0],
        drilldown: {
        name: 'MSIE versions',
            categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
            data: [
                {
                    y: 33.06,
                    drilldown: {
                        name: 'drilldown next level',
                        categories: ['a', 'b', 'c'],
                        data: [23,54,47],
                        color: colors[0]
                    }
                },
                10.85,
                7.35,
                2.41
            ],
            color: colors[0]
        }
    },{
        y: 21.63,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
            data: [13.52, 5.43, 1.58, 0.83, 0.20],
            color: colors[1]
        }
    }
];

edited Mar 16, 2012 at 0:35

answered Mar 16, 2012 at 0:25

Jere

3,4071 gold badge24 silver badges28 bronze badges

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

2 Comments

Programmer Over a year ago

Thanks does that means I can access a member like data[0].drilldown.color for its value?

Jere Over a year ago

Yup. Absolutely! Try writing console.log(data) in Firebug or google chrome dev tools. It'll give you an explorable object which shows you exactly what the structure is.

Michael Berkowski · Accepted Answer · 2012-03-16 00:23:04Z

Assuming your confusion is with the data arrays that begin as data = [{ rather than the static arrays like data : [23,54,47],

data is an array containing several object literals, each of which has a property called drilldown containing another similar structure which may contain another such data array.

It can be broken down into a structure similar to this:

data --> (array)
          |--> object
          |       --> name
          |       --> category
          |       --> drilldown (object)
          |             --> data (array)
          |                 |--> object
          |                 |--> object
          |--> object
                 --> name
                 --> category
                 --> drilldown (object)
                      --> data (array)
                           |--> object
                           |--> object

hvgotcodes · Accepted Answer · 2012-03-16 00:22:23Z

0

data is an array that contains two object literals. Each object literal in turn contains various properties, some simple, like y and color and some more complex, like drilldown, which is itself an object literal with its own properties.

At times like these, it is good to have very clear formatting to make it easier to see what belongs to what.

answered Mar 16, 2012 at 0:22

hvgotcodes

121k33 gold badges209 silver badges237 bronze badges

Comments

The Alpha · Accepted Answer · 2012-03-16 00:48:54Z

Data is an object and it contains some objects, every curly braces {} represents an object. For example

var data=[{
    a:'Hello',b:'world'},
    {
        x:'Hello World',
        y:function(){ alert(this.x);}
    }];

In above example

{a:'Hello',b:'world'} // This object contains two properties/variables a and b

is an object and it's the first (index 0) element of data array and

{
    x:'Hello World' // This is a property/Variable of 2nd objec
    y:function(){ alert(this.x);}, // This is a method/function of 2nd object

}

is the 2nd (index 1) element of data array and you can call

alert(data[0].a); // Will alert "hello" because first (0) item/object of data array has a variable that's value is "hello"
data[1].y(); // Will alert "Hello World" because 2nd item/object of data array has a method/function that alerts it's 'x' variable's data, 'this' indicates current object.

A fiddle is here.

Collectives™ on Stack Overflow

Static Array Declaration and Initialization

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related