Converting Excel to JSON Schema using JavaScript

My current task involves creating a form in an Excel sheet where the design is based on the provided data types. For example:
https://i.sstatic.net/9v4Cw.png

To achieve this, I am working on converting the Excel data into a JSON schema that can be inserted into MongoDB to dynamically generate the form.

This is the code snippet I am currently implementing:

            var workbook = XLSX.readFile(req.file.path);
            //console.log(workbook);
            var result = {};
            workbook.SheetNames.forEach(function (sheetName) {
                var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
                if (roa.length > 0) {
                    result = roa;
                }
            });
            //return result;
            //console.log(result);

            var jsonData = {};
            var dropdown = {};
            var attrTypes = result[0];
            //console.log(attrTypes);

            for (var i = 1; i < result.length; i++) {
                var obj = result[i];
                //console.log(obj);
                for (var key in obj) {
                    var attrName = key;
                    var attrValue = obj[key];
                    if (attrTypes[attrName]) {
                        var type = attrTypes[attrName].toLowerCase().replace(/ /g, ''); // Means type is given                        
                        //console.log(type);

                        if (type === "selectbox") {
                            console.log(attrValue);
                            //var dropdown = attrValue;
                            //console.log(dropdown);
                        }

                    } else {
                        //console.log(type); // Means type is not given
                        jsonData = attrName + ":" + attrValue;
                        //console.log(jsonData);
                    }
                }
            }

Desired JSON output:

[
{
    Number : 1,
    FirstName : "Abc",
    LastName : "Xyza",
    Dept: ['Finance','Health','Insurance'],
    Country : ['US','Australia','Canada'],
    Year : ['2014','2015','2016'],,
    DateofBirth" : new Date(1937,05,02),
    Gender : ['M','F']    
},
{
    Number : 2,
    FirstName : "Abcd",
    LastName : "Xyzb",
    Dept: ['Finance','Health','Insurance'],
    Country : ['US','Australia','Canada'],
    Year : ['2014','2015','2016'],,
    DateofBirth" : new Date(1948,10,27),
    Gender : ['M','F']    
}
        .
        .
        and so on
]

The above code is part of my implementation in MEANSTACK.

I would greatly appreciate any assistance with this project.

Answer №1

To view Excel files such as XLSX on the client side, you can utilize the JS-XLSX library available at this link.

When populating dropdown values in inputs, it is recommended to store them separately from other data. An example of storing array objects separately is shown below:

[   
    {  
      "Number":1,
      "FirstName":"Abc",
      "LastName":"Xyza",
      "Dept":"Finance",
      "Country":"US",
      "Year":2014,
      "DateOfBirth":19370502,
      "Gender":"M"
    },
    {  
      "Number":2,
      "FirstName":"Abcd",
      "LastName":"Xyzb",
      "Dept":"Health",
      "Country":"Australia",
      "Year":2014,
      "DateOfBirth":19481027,
      "Gender":"F"
    }
]

Differentiate storing dropdown and radio button values by keeping them stored separately as illustrated below:

{  
   "Dept":{  
      "type":"dropdown",
      "values":[  
         "Finance",
         "Health",
         "Insurance"
      ]
   },
   "Country":{  
      "type":"dropdown",
      "values":[  
         "US",
         "Australia",
         "Canada"
      ]
   },
   "Year":{  
      "type":"dropdown",
      "values":[  
         2014,
         2015,
         2016
      ]
   },
   "Gender":{  
      "type":"radio button",
      "values":[  
         "M",
         "F"
      ]
   }
}

A combination of both data sets can be represented in a single schema object like this:

// For brevity, a sample of each type is included here
jsonSchema = {
    array: [
        {  
            "Number":2,
            "FirstName":"Abcd",
            "LastName":"Xyzb",
            "Dept":"Health",
            "Country":"Australia",
            "Year":2014,
            "DateOfBirth":19481027,
            "Gender":"F"
        }
    ],
    inputs: {
        "Gender":{  
            "type":"radio button",
            "values":[  
                "M",
                "F"
            ]
        }
    }
};

Note: Date values should not be stored as date objects when serializing to JSON. Convert them into strings or numbers and handle conversion to Date objects on the client side.

The project for generating JSON and forming schemas can be found in this GIT repository:

View project on GitHub here

See the screenshot of the output below:

https://i.sstatic.net/7VlMp.png

Below is the representation of the output JSON:

{
  "array": [
    {
      "Number": 1,
      "FirstName": "Abc",
      "LastName": "Xyza",
      "Dept": "Finance",
      "Country": "US",
      "Year": 2014,
      "DateOfBirth": 19370502,
      "Gender": "M"
    },
    {
      "Number": 2,
      "FirstName": "Abcd",
      "LastName": "Xyzb",
      "Dept": "Health",
      "Country": "Australia",
      "Year": 2014,
      "DateOfBirth": 19481027,
      "Gender": "F"
    },
    {
      "Number": 3,
      "FirstName": "Abce",
      "LastName": "Xyzc",
      "Dept": "Health",
      "Country": "US",
      "Year": 2015,
      "DateOfBirth": 19441029,
      "Gender": "F"
    },
    {
      "Number": 4,
      "FirstName": "Abcf",
      "LastName": "Xyzd",
      "Dept": "Insurance",
      "Country": "Canada",
      "Year": 2016,
      "DateOfBirth": 19481030,
      "Gender": "M"
    },
    {
      "Number": 5,
      "FirstName": "Abcg",
      "LastName": "Xyze",
      "Dept": "Finance",
      "Country": "Canada",
      "Year": 2016,
      "DateOfBirth": 19480604,
      "Gender": "M"
    }
  ],
  "inputs": {
    "Dept": {
      "type": "dropdown",
      "values": [
        "Finance",
        "Health",
        "Insurance"
      ]
    },
    "Country": {
      "type": "dropdown",
      "values": [
        "US",
        "Australia",
        "Canada"
      ]
    },
    "Year": {
      "type": "dropdown",
      "values": [
        2014,
        2015,
        2016
      ]
    },
    "Gender": {
      "type": "radio button",
      "values": [
        "M",
        "F"
      ]
    }
  }
}

Answer №2

Check out this project that converts XLSX files to JSON format. Take a closer look at the code.

The conversion is done using Java language with the help of apache.poi for parsing XLSX files and mongodb.bson for JSON generation. It might give you some useful insights.

There are also projects like this one and that one written in JavaScript. You can explore Github for more code resources.

Answer №3

It appears that there may be some confusion between the definitions of schema and data. The department of Abc Xyza labeled as Finance represents data, while the potential values of Department listed in the Excel file (such as Finance, Health, or Insurance) represent the schema.

For reference, you can check out this example:

If you are indeed looking for a JSON schema, then consider implementing functions that generate arrays of strings based on provided values. This would involve specifying data types for columns (such as integer for Number, string for FirstName), setting minimum and maximum values, and defining allowed string patterns for different fields.

The desired output could resemble the following structure:

{
    "id" : "http://your.site/form-schema",
    "title" : "Form schema",
    "description" : "JSON schema for autogenerating forms",
    "type" : "object",
    "properties" : {
        "Number" : {
            "type" : "integer"
        },
        "FirstName" : {
            "type" : "string"
        },
        "LastName" : {
            "type" : "string"
        },
        "Dept" : {
            "type" : "string",
            "oneOf" : [
                        { "format" : "Finance"},
                        { "format" : "Health" },
                        { "format" : "Insurance" }
            ]
        },
        "Country" : {
            "type" : "string",
            "oneOf" : [
                        {"format" : "US" },
                        { "format" : "Australia" },
                        { "format" : "Canada" }
            ]
        },
        "Year" : {
            "type" : "integer",
            "oneOf" : [
                        { "format" : "2014" },
                        { "format" : "2015" },
                        { "format" : "2016" }
            ]
        },
        "DateofBirth" : {
            "type" : "string",
            "pattern" : "yyyyMMdd"
        },
        "Gender" : {
            "enum" : ["M", "F"]
        }
    },
    "required" : ["Number", "FirstName", "LastName"],
    "additionalProperties" : false
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Require assistance with an unoccupied Django dialog box

Looking to implement a popup in a django template, but encountering an issue where the popup appears empty. Below is the current code: <input type="button" value="{{ account.account_id }}" class="btn btn-primary" data-toggle="modal" data-target="#myMo ...

Create an AngularJS Directive that will display an array of n elements in the form of m rows of tables

Challenge: I have an array of 'n' items that I need to display in separate tables, with each table containing m rows. For instance, if n=30 and m=6, then I should have 5 tables each with 6 items displayed horizontally. Proposed Solution: I attem ...

"Injecting the value of a jQuery variable into a PHP variable

<script type="text/javascript"> $(document).ready(function(){ $("#t_select").change(function(){ var table_name = $("#t_select").val(); $.ajax({ type: 'POST', ...

Unable to access the 'localStorage' property from 'Window': Permission denied

Check out my website www.abc.com Incorporating an iframe in www.abc.com using <iframe src="www.xyz.com"></iframe> An issue has arisen: Error message: "Failed to read the 'localStorage' property from 'Window': A ...

What is the best way to navigate through the underlying MatDialog while the MatSelect is active?

When attempting to customize the scroll behavior of a MatSelect in a regular page, I discovered that using the MAT_SELECT_SCROLL_STRATEGY injection token with the NoopScrollStrategy allows for scrolling the underlying page while keeping the MatSelect stati ...

Search for data in MongoDB that falls outside of a specific range and is not between the

When attempting to query data outside of an integer range, I am encountering some challenges. So far, I have been able to successfully query a "between" range using the following code: { '$where': "#{some_method(field)} <= #{value[1]} && ...

Numerous documents within a JavaScript application

As a newcomer to JavaScript, I've been experimenting with the language to enhance my understanding. One aspect that puzzles me is how developers organize large JavaScript programs. In languages like Java, breaking down code into smaller files is commo ...

Using TypeScript for Immutable.js Record.set Type Validation

Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...

Transforming an Ext.data.TreeStore data structure into a JSON format

How can I convert an Ext.data.TreeStore to a string for saving to Local Storage? I tried using Ext.encode() but it's giving me a circular structure error. Has anyone encountered this issue and found a workaround? ...

Using AngularJS to filter JSON data

Greetings! I possess the following JSON data: $scope.Facilities= [ { Name: "-Select-", Value: 0, RegionNumber: 0 }, { Name: "Facility1", Value: 1, RegionNumber: 1 }, { Name: ...

Retrieve the interface property following the execution of the HTTP GET service

Having trouble accessing the array properties from my JSON file using the http get service. The goal is to display the Widget array on the web. service.ts: import { Http, Response, Headers } from '@angular/http'; import { Observable } from &apo ...

Step-by-step guide on displaying a tag image in HTML using html2canvas

html2canvas($('#header'), { allowTaint: true, onrendered: function (canvas) { var imgData = canvas.toDataURL("image/png"); console.log(imgData); } }); click here for an example ...

Utilize a variable within a regular expression

Can the variable label be used inside a regex like this? const label = 'test' If I have the regex: { name: /test/i } Is it possible to use the variable label inside the regex, in the following way? { name: `/${label}/i` } What do you think? ...

Resolve a 404 error caused by missing parameters in a GET request on a CherryPy server

My current project involves creating a webpage using CherryPy for server-side scripting, along with HTML, CSS, and jQuery for the client-side. I am also integrating a mySQL database into the system. One key feature of the site is a signup form where users ...

Enable users to access all of their posts with the help of mongoose in conjunction with nextjs and react

I'm currently working on developing a "my-posts" page that will display all the posts created by a specific user. User Schema const userSchema = new Mongoose.Schema({ email: { type: String}, password: { type: String}, name: { type: String}, createdAt ...

What is the process of adding CSS effects to a button when a keypress activates it?

Do you have a CSS style that transforms the look of a button when clicked on-page? Want to extend this effect to when the button is activated via keyboard? (In essence, browsers allow activating a button by pressing Tab to give it focus and then hitting S ...

AngularJS Firebreath Component

Trying to integrate a FireBreath plugin object into an AngularJS view is causing an error when attempting to render the view: TypeError: Cannot read property 'nodeName' of undefined The object can be successfully included in the view using $com ...

Displaying jQuery UI datepicker when an asp:LinkButton is clicked

How can we display the Jquery UI datepicker when clicking an asp.net linkbutton? This is the code snippet: <asp:LinkButton ID="PublishedSortLinkButton" runat="server" cssclass="datepicker" Text="<%$ Resources:Vacancies, DateRang ...

Using Mongoose Aggregate to $lookup an Array of Objects

My database has the following Collections: Collection Alpha: { _id: 123, name: "A", amount: 2, some_other_information: "ttt" } { _id: 223, name: "B", amount: 2, some_other_information: "g ...

Ways to apply inline styling with CSS in a React class-based component

Is it possible to apply inline CSS in a React class component? Here is an example of the CSS I have: { font-size: 17px; 
 font-family: Segoe UI Semibold; color: #565656; text-shadow: 0 1px 1px white; } While this CSS works fine ...