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'