How to create properties from variables in JSON
Camilo Martinez - Sep 21 '18 - 
- Dev Community
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 🖖
