How to convert Matrix HTML to JSON in Typescript (for sending through api)

问题

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"
    }
]

回答1:

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)

来源：https://stackoverflow.com/questions/57464685/how-to-convert-matrix-html-to-json-in-typescript-for-sending-through-api