Creating JavaScript classes based on JSON schemas

Question

Creating JavaScript classes based on JSON schemas

I have a JSON file containing information and data related to my work, presented in the following format:

{
"Employees":[
        {
            "id": 1,
            "fullName": "Test Test"
        }
    ],
"Infos":[
        {
            "id": 1,
            "address": "Test Test test test test",
            "employees": 1
        }
  ]
}

I am looking to automatically generate Employees and Infos Classes in JavaScript code, and then add some methods to them.

The function fetchJSONFile is designed to retrieve data from a JSON file using AJAX:

function fetchJSONFile(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', 'datas.json');
    httpRequest.send(); 
}

Next, I am attempting to automatically generate Classes and assign objects to them by calling the following function:

function generate(nameOfObject){
        fetchJSONFile(function(data){
            employees = Object.assign(new Employees(), ...data[nameOfObject]);
            console.log(employees);
        });
    }

My goal is to dynamically assign JSON data to the respective classes, so that if it's Infos, a new Infos() instance is created instead of Employees().

I intend to enhance these classes with functions like addNew() and deleteOne() for CRUD operations. Are there any solutions or suggestions for achieving this?

javascript json

Answer 1

Answer №1

If you want to simplify the process, consider designing a DynamicClass class that takes an input value and specifies a type, such as Employees, Info...

function DynamicClass (data, type) {
  this.type = type;
  // Initialization function
}
DynamicClass.prototype.xxxx = function () {}

With this setup, you can easily create the necessary classes using your data object.

fetchJSONFile(function(data){
  for(var key in data) {
    var classObj  = new DynamicClass(data[key], key);
  }
});

Answer 2

If you want to simplify the process, consider designing a DynamicClass class that takes an input value and specifies a type, such as Employees, Info...

function DynamicClass (data, type) {
  this.type = type;
  // Initialization function
}
DynamicClass.prototype.xxxx = function () {}

With this setup, you can easily create the necessary classes using your data object.

fetchJSONFile(function(data){
  for(var key in data) {
    var classObj  = new DynamicClass(data[key], key);
  }
});

Answer 3

Answer №2

If there are only 2 keys in the returned object, you can iterate through the entries and create 2 array variables using the map method like this:

For objects with more than 2 properties, you can utilize a switch statement inside the inner map:

function Employee() { this.defaultEmployeeProp = "default" }
function Infos() { this.defaultInfosProp = "default" }

const data={"Employes":[{"id":1,"fullName":"Test Test"}],"Infos":[{"id":1,"address":"Test Test test test test","employes":1}]}

const [employees, infos] = Object.entries(data).map(([key, values]) =>
  values.map(e => Object.assign(key === "Employes" ? new Employee() : new Infos(), e))
)

console.log(employees)
console.log(infos)

If you want all objects to share the same prototype, you can create a generic constructor function or a class, and then instantiate objects from the class. If you require specific behavior for different objects, you can extend the class and use a switch statement as shown in the previous example

function GenericConstructor() {
  this.default = "default"
}

GenericConstructor.prototype.commonMethod = function() {
  console.log("common method called")
}

const data={"Employes":[{"id":1,"fullName":"Test Test"}],"Infos":[{"id":1,"address":"Test Test test test test","employes":1}]}

const [employees, infos] = Object.entries(data).map(([key, values]) =>
  values.map(e => Object.assign(new GenericConstructor(), e))
)

console.log(employees)
console.log(infos)

Answer 4

If there are only 2 keys in the returned object, you can iterate through the entries and create 2 array variables using the map method like this:

For objects with more than 2 properties, you can utilize a switch statement inside the inner map:

function Employee() { this.defaultEmployeeProp = "default" }
function Infos() { this.defaultInfosProp = "default" }

const data={"Employes":[{"id":1,"fullName":"Test Test"}],"Infos":[{"id":1,"address":"Test Test test test test","employes":1}]}

const [employees, infos] = Object.entries(data).map(([key, values]) =>
  values.map(e => Object.assign(key === "Employes" ? new Employee() : new Infos(), e))
)

console.log(employees)
console.log(infos)

If you want all objects to share the same prototype, you can create a generic constructor function or a class, and then instantiate objects from the class. If you require specific behavior for different objects, you can extend the class and use a switch statement as shown in the previous example

function GenericConstructor() {
  this.default = "default"
}

GenericConstructor.prototype.commonMethod = function() {
  console.log("common method called")
}

const data={"Employes":[{"id":1,"fullName":"Test Test"}],"Infos":[{"id":1,"address":"Test Test test test test","employes":1}]}

const [employees, infos] = Object.entries(data).map(([key, values]) =>
  values.map(e => Object.assign(new GenericConstructor(), e))
)

console.log(employees)
console.log(infos)

Creating JavaScript classes based on JSON schemas

Answer №1

Answer №2

Similar questions

Editable Table Component in React

Could someone provide clarification on this particular line of Apex code for me?

Is there a way to retrieve the HTML raw code using backticks for string interpolation in JavaScript?

Popup confirming successful subscription to Magento newsletter

The function parseFloat in Javascript can be used to subtract two numbers, returning an integer value

The div on my webpage is not loading its content as expected when using JavaScript

When a page first loads in Next.js with Firebase, the useEffect hook may return an undefined value

How to Properly Parse JSON in Java?

What techniques can I employ to ensure that withLatestFrom() effectively interacts with itself?

I'm having trouble getting my if statement to function properly with a random number

Modify one specific variable within my comprehensive collection on Firebase Firestore

Is there a difference between innerHTML strings and their corresponding strings in JavaScript?

Using THREE.js: Finding the nearest point between two rays in a THREE.js environment

What steps can be taken to resolve an error encountered when attempting a dynamic data POST request from the body

Modifying JavaScript object values using the Object() constructor

Storing Boolean values in MongoDB with Express JS: A Step-by-Step Guide

Ajax not functioning after submission of form

Beginning the default execution right away

What is the most efficient way to automatically start the Webpack-dev-server every time a file is

Guide on obtaining GET request in a JSON formatted data file