Gnoke-flatjson
⚠️ Users would import a JSON file and the table would either crash, show [object Object] in cells, or worse — silently drop entire columns without warning.
The problem wasn't the table renderer. It was that JSON has no single shape.
An API response looks like this:
[{ "name": "Alice", "age": 30 }]
A database export looks like this:
{ "people": [["name","age"], ["Alice", 30]] }
A spreadsheet export looks like this:
[["name","age"], ["Alice", 30]]
They all mean the same thing. But every shape needs different handling.
🔧 So I wrote a normalizer — a function that accepts any of these shapes and always returns the same thing:
{
headers: ["name", "age"],
rows: [["Alice", "30"]]
}
Over time it grew to handle 8 formats: silent column drops, [object Object] cells, broken row ordering on mixed arrays — all handled at the normalization layer, before any renderer ever sees the data.
Eventually I realised — this logic deserves its own home.
So I extracted it.
📦 Meet gnoke-flatjson
One function. Any JSON in. Clean { headers, rows } out.
npm install gnoke-flatjson
const flatJson = require('gnoke-flatjson');
const result = flatJson(data);
// result.headers — column names
// result.rows — all cells as strings
Or drop it straight into any HTML file — no npm needed:
<script src="https://cdn.jsdelivr.net/gh/edmundsparrow/gnoke-flatjson/index.js"></script>
🗂️ What it handles
| Input shape | Example |
|---|---|
| Array of objects | [{ name: "Alice" }] |
| Array of arrays | [["name"],["Alice"]] |
| Entity-wrapped | { "people": [["name"],["Alice"]] } |
| Explicit headers/rows | { headers:[], rows:[[]] } |
| Single object | { name: "Alice" } |
| Array of primitives | ["Alice","Bob"] |
| Inconsistent keys | Missing keys become empty strings, no columns dropped |
| Nested objects | Stringified as JSON instead of [object Object]
|
🔗 Try it live
There's a demo page where you can paste any JSON and see the result instantly — including a rendered table.
👉 edmundsparrow.github.io/gnoke-flatjson
✂️ The utility was born from a real app solving a real problem. Gnoke DataForge was the inspiration.
Zero dependencies. MIT licensed. 68 lines.
— Edmund Sparrow, Gnoke Suite
This article was originally published by DEV Community and written by Ekong Ikpe.
Read original article on DEV Community