如何在 Typescript 中将 Matrix HTML 转换为 JSON(用于通过 api 发送) [英] How to convert Matrix HTML to JSON in Typescript (for sending through api)

问题描述

我已经创建了具有一些其他功能的自定义矩阵视觉效果.但是现在我被困在将数据提取到 JSON 并通过 API 发送的步骤中！下面是它的 HTML 代码(虽然它是矩阵但它的结构 HTML 是表格).任何人都知道如何将 Matrix HTML 转换为 Json?你能解释一下更详细的吗！非常感谢您的帮助！

//这是我的 Matrix 必须转换为 JSON东北南加利福尼亚州 5 6佛罗里达州 10 15//下面是 HTML 结构:<div class="datagrid"><表格><tr><th></th><th colspan="undefined">东北</th><th colspan="undefined">Southern</th></tr><tr><th>加利福尼亚</th><td>5</td><td>6</td></tr><tr><th>佛罗里达</th><td>10</td><td>15</td></tr></tbody>

//我期望的 JSON 格式是这样的:[{"name_column_field": "东北",价值":5，"name_row_field": "加利福尼亚"},{"name_column_field": "东北",价值":10，"name_row_field": "佛罗里达"},{"name_column_field": "南方",价值":6，"name_row_field": "加利福尼亚"},{"name_column_field": "南方",价值":15，"name_row_field": "佛罗里达"}]

解决方案

对我来说，如果我们首先有一个嵌套数组来表示我们的矩阵，那么最容易考虑这个问题.

const trs = document.getElementsByTagName("tr")常量矩阵 = []//一个嵌套的 for 循环来创建我们的矩阵for (让 i = 0; i < trs.length; i++){矩阵推([])for (让 j = 0; j 

但是如果您想在一个 for 循环中完成所有操作，您可以这样做:

const trs = document.getElementsByTagName("tr")常量对象= []for (让 i = 1; i < trs.length; i++){for (让 j = 1; j 

I have create the custom Matrix visual with some other features. But now I'm stuck in step to extract the data into JSON and send it through API! Below is its HTML code (although it is matrix but its structure HTML is table). Anyone have ideas how to convert Matrix HTML to Json? and can you please explain it more details! Many thanks for your help!

// This is my Matrix have to convert to JSON

           Northeast   Southern
California 5            6
Florida    10           15

// Below is HTML structure:

<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>

// My expect JSON format is 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"
    }
]

解决方案

For me, it's easiest to think about this problem if we first have a nested array to represent our matrix.

const trs = document.getElementsByTagName("tr")

const matrix = []
// a nested for loop to create 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 see what the nested arrays look like

const obj = []
// nested loops to use our matrix to create our object
// these will start a 1, because 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]
        })
    }
}

// turn the object into JSON
const completedJson = JSON.stringify(obj)

But if you wanted to do it all in one for loop, you could do this:

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)

这篇关于如何在 Typescript 中将 Matrix HTML 转换为 JSON(用于通过 api 发送)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！