The JavaScript API of the Document Editor provides a set of methods and events to interact with the document and to manipulate the document content. Some functionality, such as setting the text in a particular table cell, requires different methods and callbacks.

For example, to set the text of a specific cell in a table, you would need to get the specific table and then set the text to a specific cell in the table.

To demonstrate how to set the text of a specific cell in a table, we will first insert a table into the document. The following code snippet shows how to insert a table into the document.

TXTextControl.tables.add(rows, columns, tableId);

Set TableCell Text

After inserting the table, you can set the text of a specific cell in the table by using the following code snippet:

function setTableCellText(tableId, row, column, text) {
    TXTextControl.tables.getItem(table => {
        table.cells.getItem(cell => {
            cell.setText(text);
        }, null, row, column);
    }, null, tableId);
}

The code retrieves the table using the getItem method that accepts an id and returns the table.

The following code calls the above method and sets the text of the first cell in the third row of the table:

setTableCellText(10,3,1,'Hi there!')

Get TableCell Text

To get the text of a specific cell in a table, you can use the following code snippet:

async function getTableCellText(tableId, row, column) {
    return new Promise((resolve, reject) => {
        TXTextControl.tables.getItem(table => {
            table.cells.getItem(cell => {
                cell.getText(cellText => {
                    resolve(cellText);
                }, error => {
                    reject(error);
                });
            }, null, row, column);
        }, null, tableId);
    });
}

This asynchronous method retrieves the table using the getItem method that accepts an id and returns the table and uses the getText method to get the text of the cell.

This is how the above method is called:

let text = await getTableCellText(10, 3, 3);

Exporting the Table to JSON

For specific scenarios, it might be necessary to export the table to JSON. The following code snippet shows how to export the table to JSON including text, row, and column information:

async function exportTableAsJSON(tableId) {

    function CustomTableCell(text, row, column) {
        this.text = text;
        this.row = row;
        this.column = column;
    }

    return new Promise((resolve, reject) => {
        TXTextControl.tables.getItem(table => {
            table.rows.getCount(rows => {
                let tableCell = [];

                table.columns.getCount(columns => {
                    let totalCells = rows * columns;

                    for (let i = 1; i <= rows; i++) {
                        for (let j = 1; j <= columns; j++) {
                            table.cells.getItem(cell => {
                                cell.getText(cellText => {
                                    tableCell.push(new CustomTableCell(cellText, i, j));
                                    if (tableCell.length === totalCells) {
                                        resolve(JSON.stringify(tableCell));
                                    }
                                });
                            }, null, i, j);
                        }
                    }

                });
            });
        }, null, tableId);
    });
}

This asynchronous method loops through the specified table and creates a CustomTableCell object of each cell, which is stored in an array that is returned as JSON. It is called as follows:

let tableCell = await exportTableAsJSON(10);
console.log(tableCell);

This is the (shortened) JSON output:

[
   {
      "text":"Cell text 1 1",
      "row":1,
      "column":1
   },
   {
      "text":"Cell text 1 2",
      "row":1,
      "column":2
   },
   {
      "text":"Cell text 1 3",
      "row":1,
      "column":3
   },
   [...]
]

Importing the Table from JSON

After exporting the table to JSON, you can import the table back into the document. The following code snippet shows how to import the table from JSON:

async function importTableFromJSON(tableId, json) {
    return new Promise((resolve, reject) => {
        let tableCell = JSON.parse(json);

        TXTextControl.tables.getItem(table => {
            tableCell.forEach(cell => {
                table.cells.getItem(cellItem => {
                    cellItem.setText(cell.text);
                }, null, cell.row, cell.column);
            });
        }, null, tableId);
    });
}

This asynchronous method accepts the JSON string and loops through the JSON array to add the content to an existing table. In this case, the table with the specific structure must already exist in the document.

If you want to create a new table from the JSON data, you can use the following code snippet:

async function importAndCreateTableFromJSON(tableId, json) {
    return new Promise((resolve, reject) => {
        let tableCell = JSON.parse(json);
        let columns = 0;
        let rows = 0;

        tableCell.forEach(cell => {
            if (cell.column > columns) {
                columns = cell.column;
            }

            if (cell.row > rows) {
                rows = cell.row;
            }
        });

        TXTextControl.tables.add(rows, columns, tableId);

        TXTextControl.tables.getItem(table => {
            tableCell.forEach(cell => {
                table.cells.getItem(cellItem => {
                    cellItem.setText(cell.text);
                }, null, cell.row, cell.column);
            });
        }, null, tableId);
    });
}

Conclusion

This article showed how to set and get the text of a specific cell in a table using the JavaScript API of the Document Editor. Additionally, it showed how to export the table to JSON and import the table from JSON.

These methods can be used to manipulate the content of tables in a document and to export and import tables to and from JSON.