DEV Community

Cover image for How to create properties from variables in JSON
Camilo Martinez
Camilo Martinez

Posted on • Updated on

How to create properties from variables in JSON

JSON and JavaScript love each other… interact between them is something completely natural and you can create an object dynamically from scratch.

Some times we need to create a JSON and its properties from variables and not from fixed values, these properties can be used in the future as some kind of index and will be a lot easier to get information without loops to need.

It’s really simple, we can create an object, properties from variables, and assign them a value:

// hidden setup JavaScript code goes in this preamble area var json_list = {}; // Create an object as JSON root var user = 'foo'; // Create an 'user' variable and assign it 'foo' as property name json_list[user] = {}; // Creates new 'foo' property as object json_list[user].alert = {}; // Creates an 'alert' property as object in 'foo' property json_list[user].alert.time = 30; // You can assign a value using a variable ... json_list.foo.alert.type = 'sec'; // ... or directly with the property name user = 'bar'; // Use the same 'user' variable but assign it a new 'bar' value json_list[user] = {}; // Creates new 'bar' property as object var objAlert = { 'type': 'sec', 'time': 60 }; // Create an 'alert' objet filled with properties json_list[user].alert = objAlert; // Assign an 'alert' property as object from 'objAlert' variable json_list[user].alert.type = 'min'; // You can change his value using a variable... json_list.bar.alert.time = 80; // ... or directly with the property name // Convert JSON object to string var jsonstr = JSON.stringify(json_list);

To see all this object converted in a string, just put it out in a console with:

// hidden setup JavaScript code goes in this preamble area var json_list = {}; var user = 'foo'; json_list[user] = {}; json_list[user].alert = {}; json_list[user].alert.time = 30; json_list.foo.alert.type = 'sec'; user = 'bar'; json_list[user] = {}; var objAlert = { 'type': 'sec', time: 60 }; json_list[user].alert = objAlert; json_list[user].alert.type = 'min'; json_list.bar.alert.time = 80; var jsonstr = JSON.stringify(json_list); // Click [RUN] button to see result console.log(jsonstr)

Now starts my favorite part … access information without loops.

// hidden setup JavaScript code goes in this preamble area var json_list = {}; var user = 'foo'; json_list[user] = {}; json_list[user].alert = {}; json_list[user].alert.time = 30; json_list.foo.alert.type = 'sec'; user = 'bar'; json_list[user] = {}; var objAlert = { 'type': 'sec', time: 60 }; json_list[user].alert = objAlert; json_list[user].alert.type = 'min'; json_list.bar.alert.time = 80; var jsonstr = JSON.stringify(json_list); // Click [RUN] button to see result console.log(JSON.stringify(json_list["foo"])); console.log(json_list["foo"]["alert"]["type"]); console.log(json_list["bar"]["alert"]["time"]);

It's time to learn about:


That’s All Folks!
Happy Coding 🖖

beer

Top comments (2)

Collapse
 
changzhao profile image
Chang Zhao

"access information without loops" — do you mean that using arrays (like list["foo"]["alert"]["type"]), we make Javascript search the array with internal loops?

Collapse
 
equiman profile image
Camilo Martinez

Without using forEach or .filter