Using JavaScript to create an object from a JSON data set

Question

Using JavaScript to create an object from a JSON data set

Currently, I am working on a TestComplete (UI testing) project that involves JavaScript. In an attempt to store class references in JSON, I have encountered issues with my code not functioning as expected. This has led me to suspect that there may be a misunderstanding regarding how JavaScript manages class references within JSON objects. Below is the snippet of code that outlines my thought process:

class MyClass {
  constructor() {
    this.name = "ClassName";
  }
}

function print_name(str_name) {
  console.log(str_name);
}

let my_json = {
    "keyOne": [
        MyClass
    ]
};

let class_ref = my_json["keyOne"][0];
print_name(class_ref.name);

I am puzzled as to why the print_name function fails to output the "name" property of the MyClass object. Can anyone shed light on why this might be happening?

javascript json testcomplete

Answer 1

Answer №1

Yes, there is a reason for that and the correct way to write the code is:

let my_json = {
"keyOne": [
    new MyClass()
    ]
};

Why?

The reason is that you should store an instance of the class, not the class itself. In Javascript, we use the new keyword followed by the constructor function to achieve this.

If you check the code:

typeof MyClass

in the console, you will see function. This syntax comes with ES2015, making it easier to work with many things. Your code is similar to:

function MyClass(){
this.name = "ClassName";
}

This acts as a blueprint, and to create an object, you should use the new keyword followed by the constructor like this:

let mySimpleClass = new MyClass();

If you then console.log:

mySimpleClass.name you will get ClassName.

Note: If you want to convert your my_json variable to actual JSON, use:

JSON.stringify(my_json);

Learn more:

Working with JavaScript Objects

JSON.stringify()

Answer 2

Yes, there is a reason for that and the correct way to write the code is:

let my_json = {
"keyOne": [
    new MyClass()
    ]
};

Why?

The reason is that you should store an instance of the class, not the class itself. In Javascript, we use the new keyword followed by the constructor function to achieve this.

If you check the code:

typeof MyClass

in the console, you will see function. This syntax comes with ES2015, making it easier to work with many things. Your code is similar to:

function MyClass(){
this.name = "ClassName";
}

This acts as a blueprint, and to create an object, you should use the new keyword followed by the constructor like this:

let mySimpleClass = new MyClass();

If you then console.log:

mySimpleClass.name you will get ClassName.

Note: If you want to convert your my_json variable to actual JSON, use:

JSON.stringify(my_json);

Learn more:

Working with JavaScript Objects

JSON.stringify()

Using JavaScript to create an object from a JSON data set

Answer №1

Similar questions

Ways to showcase numerous records in Ember.js template using hasMany relationship?

Using Puppeteer to cycle through a CSV file and take a screenshot for each individual row?

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

See-through Windows on Linux (Electron)

JavaScript logic for playing the hangman game

The combination of Inline CSS and Bootstrap classes does not seem to be functioning properly

Troubleshooting problem with JSON decoding in PHP and json_encode

What is the process for generating a comprehensive HTML table using AngularJS?

What is the correct way to activate buttons within a v-for loop in Vue.js?

Ways to disable an AJAX loading animation

AngularJS: Tips for Waiting in the 'Run' Method until Completion

node js retrieves information from the request body

Steps to prevent specific links from being clickable in React Native's webview component

Choose the initial p tag that includes an image, based on the content of another div

The identifier for the $.find control is not defined

Tips for expanding a script that relocates a logo into a navigation consisting of several unordered lists

What is causing Angular services to malfunction when used within setTimeout and setInterval functions?

The Angular http.post function seems to be returning null responses consistently, without any actual data being received

Tips for inserting a hyperlink into a Chakra UI toast

Issue with Mouse Hover not functioning properly across various 3D objects