Is it possible to dynamically add key:value pair to JS objects?

Question

Suppose I have a JS object zoneJSObject which has a structure like this:

zoneJSObject = {"ZoneWidgets" : ""}

when creating this object I don't know how many ZoneWidgets I'll have. So I can't pre-define a set structure for them. ZoneWidgets will be a array of integer id's eg. "123456789", further on I want to acquire coordinates for each of these widgets. So ZoneWidget 123456789 will have 4 key:value pairs top,bottom,left,right how can I add these under the specific widget?

data = "111222.333"
zoneJSObject[0].ZoneWidgets[0] = "123456789"
zoneJSObject[0].ZoneWidgets[0].top = data // tried adding it like this but got this error

Uncaught (in promise) TypeError: Cannot create property 'top'

complete code has 10k + lines, this should be enough for the question, if you think some relevant information is missing let me know. I know why the error occured. But I want to know if there is a way to do this in a different way — S.., Mar 08 '21 at 13:37
Why are you initializing the property as an empty _string_, when later on you apparently want to be able to access it via an index `i`? If you want this to be an _array_ that stores multiple items, then initialize it as an empty array. And if you want to be able to add properties to objects you put into that array - then you still need to create those objects somewhere in the first place, they will not magically appear by themselves. — CBroe, Mar 08 '21 at 13:37
@HereticMonkey yes fixed the code, I'm adding all 4 properties at once, top being the first, hence the error is thrown at top — S.., Mar 08 '21 at 13:38
@CBroe at this point it has values which I access by iterating the array. As I said, I start with it being empty, then add values, and **then** after the array has values I add the 4 properties (top, bottom, left, right) to each. Don't know what you mean by "you need to create those objects" I just want to assign 4 key:value pairs to a specific index of ZoneWidgets — S.., Mar 08 '21 at 13:41
_“at this point it has values which I access by iterating the array”_ - what has, and what exactly are you iterating? We would not have to do so much discussion for clarification here, if you showed a _proper_ [mre] of the issue to begin with. So please do that, instead of showing just a snippet, that lacks proper context. And don’t give excuses, how your full application is thousands of lines of codes - no one wants to see all that; _reducing_ what you have to a MRE, is _your_ responsibility here. — CBroe, Mar 08 '21 at 13:45
I'm asking a simple question, if it is possible to add key:value pairs to a property of a JS object. If I included all the code that is responsible for filling out values in the JS object which are absolutely irrelevant since they are just a array of integers it would take at least hundereds of lines since there are async handlers, server connections, etc.. hence the data is taken from a online whiteboard. Again, this question has nothing to do with the data inside the object, all I want is to know if I can append the JS object with the 4 key:value pairs after the initial declaration — S.., Mar 08 '21 at 14:08
We have many questions about adding properties to objects after declaration. Indeed, [How can I add a key/value pair to a JavaScript object?](https://stackoverflow.com/q/1168807/215552) has almost the same title as yours. If the question is truly only about that, then your answer lies within. — Heretic Monkey, Mar 08 '21 at 14:12
Does this answer your question? [TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl](https://stackoverflow.com/questions/43603543/typeerror-cannot-create-property-validator-on-string-abcgmail-com-at-setup) — Heretic Monkey, Mar 08 '21 at 14:13
What you have, however, is not a typical object. You have a string, and you're trying to add properties to the string. The error message continues `on string '123456789'`, a detail that is quite important to understanding it. — Heretic Monkey, Mar 08 '21 at 14:15
I'd suggest you read the [JSON specification](https://www.json.org/json-en.html), specifically the differences between strings (`""`), Objects(`{}`) and Arrays (`[]`) — Liam, Mar 08 '21 at 14:22

score 2 · Accepted Answer · answered Mar 08 '21 at 14:18

ZoneWidgets will be a array of integer id's eg. "123456789", further on I want to acquire coordinates for each of these widgets. So ZoneWidget 123456789 will have 4 key:value pairs top,bottom,left,right how can I add these under the specific widget?

You will need your ZoneWidgets to be an array of objects if you wish to assign your key-value pairs and an integer:

ZoneWidgets = [
  { id: 1234 },
  { id: 5678 },
];

Later:

ZoneWidgets[0].left = myLeft;
ZoneWidgets[0].right = myRight;

thank you, didn't think about the compatibility issue while passing strings as id values. This helped me solve the dynamic key:value adding. marking this as answer — S.., Mar 08 '21 at 16:02

Is it possible to dynamically add key:value pair to JS objects?

1 Answers1