Forem

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

Posted on • Edited on

9 1

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more