How it comes that my json formatted OBJ doesn't have a length

Question

I am just trying to create an Object containg several Controls from After Effects ScriptUI API.

This is what my obj looks like:

var easeyPeasy = {};

// groups
easeyPeasy.groups = {
  "easeIn_grp": ease__Panel.add('group', undefined, {
    name: 'easeIn group'
  }),
  "easyEase_grp": ease__Panel.add('group', undefined, {
    name: 'easyEase group'
  }),
  "easeOut_grp": ease__Panel.add('group', undefined, {
    name: 'easeOut group'
  })
};

// labels
easeyPeasy.label = {
  "easeIn_label": easeyPeasy.groups["easeIn_grp"].add('statictext', undefined, 'ease in:', {
    name: 'easeIn_label'
  }),
  "easyEase_label": easeyPeasy.groups["easyEase_grp"].add('statictext', undefined, 'easy ease: ', {
    name: 'easyEase_label'
  }),
  "easeOut_label": easeyPeasy.groups["easeOut_grp"].add('statictext', undefined, 'ease out:', {
    name: 'easeOut_label'
  })
};

// slider
easeyPeasy.slider = {
  "easeIn_slider": easeyPeasy.groups["easeIn_grp"].add('slider', undefined, 50, 0, 100, {
    name: 'easeIn_slider'
  }),
  "easyEase_slider": easeyPeasy.groups["easyEase_grp"].add('slider', undefined, 50, 0, 100, {
    name: 'easyEase_slider'
  }),
  "easeOut_slider": easeyPeasy.groups["easeOut_grp"].add('slider', undefined, 50, 0, 100, {
    name: 'easeOut_slider'
  })
}

// inputs
easeyPeasy.inputs = {
  "easeIn_input": easeyPeasy.groups["easeIn_grp"].add('edittext', undefined, 50, {
    name: 'easeIn_input'
  }),
  "easyEase_input": easeyPeasy.groups["easyEase_grp"].add('edittext', undefined, 50, {
    name: 'easyEase_input'
  }),
  "easeOut_input": easeyPeasy.groups["easeOut_grp"].add('edittext', undefined, 50, {
    name: 'easeOut_input'
  })
}

if I know try to return the length of my easeyPeasy.inputs for example I only get undefined

alert(easeyPeasy.inputs.length)

Besides that I can't select values in my obj via key index. It only works via key string.

working:

alert(easeyPeasy.inputs["easeIn_input"])

not working:

alert(easeyPeasy.inputs[0])

Does anyone know what I am missing here? Thanks in advance

Answer 1

You seem to be expecting JavaScript objects to behave like PHP arrays. They don't.

Arrays have properties whose names are numbers and a length property which is equal to the name of the highest numerical property plus one.

Objects just have named properties.

You can generate an array of property names in an object with Object.keys().

var data = {
  foo: "foo_val",
  bar: "bar_val"
};
var props = Object.keys(data);
for (var i = 0; i < props.length; i++) {
  document.body.appendChild(
    document.createTextNode(
      data[props[i]]
    )
  )
  document.body.appendChild(
    document.createElement("br")
  );
}

Answer 2

You have created a Javascript object; it just stores values accessible via keys.

To determine the length in characters, you need to convert it to a string representation first:

var json = JSON.stringify(easeyPeasy)

Answer 3

If you want to loop over properties of an object, you can also use for-in

Example

var obj = {
  test1:"test1",
  var1:10,
  var2:20,
  var3:30
}

for (var key in obj){
  document.write(key + " :  " + obj[key] + "<br/>");
}