JSON ⇌ Table

During the process of making Gwent Classic, I needed a way to store all the pertinent data for the game’s cards. I decided to store the information in json format because I could simply parse it into an object when the game loads. To accomplish this, I made an in-browser tool to log the data since it would also benefit from easily importing and exporting the json as it is updated. Such a tool would be flexible enough to modify, add or remove the information and object properties.

The tool is powered by an html table that contains cells editable via the contenteditable attribute. By setting contenteditable to true on an element, that element’s contents can be changed by the client inside of the browser. In the case of the table, data inside of a cell including the title of a column can be modified. The client can also add rows and columns using the “+” buttons to the bottom and right of the table which add new elements via the DOM that are also editable.

The left panel allows the client to import json data into a new table and to export the data currently in the table into a json-ready string. In the table each row corresponds to an object while each column is a property of that object. For my use case, the table was converted into an array of cards with properties like name, strength and abilities.

If you find yourself in need of a similar tool you can access the table here.