How to create properties from variables in JSON
Tags: javascript, json, howto, properties
Published: 2018-09-21 18:08:20

---
title: How to create properties from variables in JSON
published: true
description: Steep by steep to better understand JSON
tags: JavaScript, JSON, HowTo, Properties
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/e1yai538512lmuqfcszl.png
series: json-helpful-tips
---

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:

{% runkit
// 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);
{% endrunkit %}

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

{% runkit
// 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)
{% endrunkit %}

Now starts my favorite part … access information without loops.

{% runkit
// 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"]); 
{% endrunkit %}

---

It's time to learn about:

{% link https://dev.to/equiman/how-to-make-crud-operations-in-json-12he %}

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)