javascript object issue

Question

I am trying to understand someone else's codes. He has

task.prototype.taskAttributes = {
  'header' : [
    {'name' : 'display_type', 'display' : 'Display Type', 'type' : 'select', 'options' : {
      'default' : 'Default',
      name1 : 'Peter',
      name2 : 'Ted',
     }
    },
    {'name' : 'background', 'display' : 'Background', 'type' : 'image'},
    {'name' : 'background_position', 'display' : 'Background Position', 'type' : 'text'},
    {'name' : 'credit', 'display' : 'Background Credit', 'type' : 'text'}],

  'input' : [
    {'name' : 'display_type', 'display' : 'Display Type', 'type' : 'select', 'options' : {
      'default' : 'Default',
      title1 : 'manager',
      title2 : 'employee'}
    },
    {'name' : 'background', 'display' : 'Background', 'type' : 'image'},
    {'name' : 'background_position', 'display' : 'Background Position', 'type' : 'text'},

  'image' : [{'name' : 'column', 'type' : 'select', 'options' : ['', 'left', 'right']}]
}

I am not sure if 'header' and 'input' are the object properties? What are the attributes under 'header' and 'input'

What do these do:

{'name' : 'display_type', 'display' : 'Display Type', 'type' : 'select', 'options' : {
  'default' : 'Default',
  name1 : 'Peter',
  name2 : 'Ted',
 }
},
{'name' : 'background', 'display' : 'Background', 'type' : 'image'},
{'name' : 'background_position', 'display' : 'Background Position', 'type' : 'text'},
{'name' : 'credit', 'display' : 'Background Credit', 'type' : 'text'}],

I thought to declare object properties, we do

attribute={header:'header', input:'input'}

and I am not sure why he has so many atttriubes.

Thanks for the help guys!

Answer 1

header and input are indeed the object properties of taskAttributes, along with image as well.

taskAttributes = {
  // Three object properties, each is an array
  header: [],
  input: [],
  image: []
}

Each of those is itself an array [] of objects {} with properties like name, display, type. This addresses the "what do these do" part of your question.

// Example object element of the parent attribute arrays:
// There are multiples of these objects for each property header, input, image
{'name' : 'background', 'display' : 'Background', 'type' : 'image', 'options': {...}}

So to access the first name beneath header for example, you would access its array key [0] as in:

taskAttributes.header[0].name
// 'displayType'

// And the third array element [2]
taskAttributes.header[2].name
// 'credit'

There is one further level of nesting on the first array element of both headers and input which looks like:

// Property named options is an object...
'options' : {
  'default' : 'Default',
  title1 : 'manager',
  title2 : 'employee'
}

That is yet another object referenced as options for each of those.

taskAttribtues.header[0].options.title1
// 'manager'

Answer 2

Yes, header, input and image are properties of the task.prototype.taskAttributes object, each of them containing an array of objects. Piping your code through http://jsbeautifier.org/ could help by accentuating the literal structure with indentation:

task.prototype.taskAttributes = {
    'header': [{
        'name': 'display_type',
        'display': 'Display Type',
        'type': 'select',
        'options': {
            'default': 'Default',
            'name1': 'Peter',
            'name2': 'Ted',
        }
    }, {
        'name': 'background',
        'display': 'Background',
        'type': 'image'
    }, {
        'name': 'background_position',
        'display': 'Background Position',
        'type': 'text'
    }, {
        'name': 'credit',
        'display': 'Background Credit',
        'type': 'text'
    }],
    'input': [{
        'name': 'display_type',
        'display': 'Display Type',
        'type': 'select',
        'options': {
            'default': 'Default',
            'title1': 'manager',
            'title2': 'employee'
        }
    }, {
        'name': 'background',
        'display': 'Background',
        'type': 'image'
    }, {
        'name': 'background_position',
        'display': 'Background Position',
        'type': 'text'
    },
    'image': [{
        'name': 'column',
        'type': 'select',
        'options': ['', 'left', 'right']
    }]
};