Converting HTML Matrix to JSON using Typescript for API transmission

Question

Converting HTML Matrix to JSON using Typescript for API transmission

I have created a unique Matrix visual with additional features, but I am currently facing difficulties in extracting the data into JSON format and sending it through an API. Below is the HTML code for the matrix (which resembles a table structure). I would appreciate any suggestions on how to convert this Matrix HTML into JSON format. Could you please provide more detailed explanations? Thank you very much for your assistance!

// Here is the Matrix that needs to be converted into JSON

           Northeast   Southern
California 5            6
Florida    10           15

// The HTML structure is as follows:

<div class="datagrid">
    <table>
        <tbody>
            <tr>
                <th></th>
                <th colspan="undefined">Northeast</th>
                <th colspan="undefined">Southern</th>
            </tr>
            <tr>
                <th>California</th>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <th>Florida</th>
                <td>10</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</div>

// The expected JSON format should look like this:
[
    {
        "name_column_field": "Northeast",
        "value": 5,
        "name_row_field": "California"
    },
    {
        "name_column_field": "Northeast",
        "value": 10,
        "name_row_field": "Florida"
    },
    {
        "name_column_field": "Southern",
        "value": 6,
        "name_row_field": "California"
    },
    {
        "name_column_field": "Southern",
        "value": 15,
        "name_row_field": "Florida"
    }
]

json typescript type-conversion powerbi

Answer 1

Answer №1

To simplify this problem, I find it helpful to start by organizing the data into a nested array structure to represent our matrix.

const trs = document.getElementsByTagName("tr")

const matrix = []
// using a nested for loop to populate our matrix
for (let i = 0; i < trs.length; i++){
    matrix.push([])
    for (let j = 0; j < trs[i].children.length; j++){
        matrix[i].push(trs[i].children[j].textContent)
    }
}

// console.log(matrix) to visualize the nested arrays

const obj = []
// utilizing nested loops to iterate through the matrix and construct our object
// starting at index 1 as our labels are at index 0
for (let i = 1; i < trs.length; i++){
    for (let j = 1; j < trs[i].children.length; j++){
        obj.push({
            name_column_field: matrix[0][j],
            value: matrix[i][j],
            name_row_field: matrix[i][0]
        })
    }
}

// converting the object to JSON format
const completedJson = JSON.stringify(obj)

If you prefer to achieve this in a single for loop, here is an alternate approach:

const trs = document.getElementsByTagName("tr")

const obj= []
for (let i = 1; i < trs.length; i++){
    for (let j = 1; j < trs[i].children.length; j++){
        obj.push({
            name_column_field: trs[0].children[j].textContent,
            value: trs[i].children[j].textContent,
            name_row_field: trs[i].children[0].textContent
        })
    }
}

const completedJson = JSON.stringify(obj)

console.log(completedJson)

Answer 2

To simplify this problem, I find it helpful to start by organizing the data into a nested array structure to represent our matrix.

const trs = document.getElementsByTagName("tr")

const matrix = []
// using a nested for loop to populate our matrix
for (let i = 0; i < trs.length; i++){
    matrix.push([])
    for (let j = 0; j < trs[i].children.length; j++){
        matrix[i].push(trs[i].children[j].textContent)
    }
}

// console.log(matrix) to visualize the nested arrays

const obj = []
// utilizing nested loops to iterate through the matrix and construct our object
// starting at index 1 as our labels are at index 0
for (let i = 1; i < trs.length; i++){
    for (let j = 1; j < trs[i].children.length; j++){
        obj.push({
            name_column_field: matrix[0][j],
            value: matrix[i][j],
            name_row_field: matrix[i][0]
        })
    }
}

// converting the object to JSON format
const completedJson = JSON.stringify(obj)

If you prefer to achieve this in a single for loop, here is an alternate approach:

const trs = document.getElementsByTagName("tr")

const obj= []
for (let i = 1; i < trs.length; i++){
    for (let j = 1; j < trs[i].children.length; j++){
        obj.push({
            name_column_field: trs[0].children[j].textContent,
            value: trs[i].children[j].textContent,
            name_row_field: trs[i].children[0].textContent
        })
    }
}

const completedJson = JSON.stringify(obj)

console.log(completedJson)

Converting HTML Matrix to JSON using Typescript for API transmission

Answer №1

Similar questions

How can one encode an array of hashes using Jbuilder?

Error: Cannot read property 'X' of undefined in JavaScript when using Django framework

Transmitting a JSON Array Using Python

Incorporate a New Feature into my NPM Package

Tips for extracting specific input values from a JSON object

The issue of 'window is undefined' arises when utilizing window as a useValue provider in Angular 4 with

Javascript - Issue with Ajax causing additional commas in JSON responses

I'm running into an issue with deserialization and getting an error from Newtonsoft.Json.JsonConvert. Can anyone

Is there a way to retrieve JSON output from an express-openapi mysql.query() function?

Guide: Creating two distinct objects in a single HTTP request using a JSON file

Replacing `any` in TypeScript when combining interfaces

Tips for addressing style issues within innerText

`Firebase User Instance and Custom Firestore Document`

Saving an image from a URL directly to the assets folder: A step-by-step

TypeScript erroneously defines data type

Using TypeScript for React with Mapbox GL

Encountering an error message that reads "State.Push is not a valid function" upon integrating

Developing a Fresh Entry on Monday.com Using Python

Encountering the error "Element implicitly has an 'any' type because expression of type 'string' cannot be used to index type '{}'" can be frustrating when working with React TypeScript

Error: Material UI encountered a problem with type error - number 0 cannot be iterated (property Symbol(Symbol.iterator) cannot be read)