HTML Table to JSON Converter
Convert HTML tables to JSON format for APIs, JavaScript applications, and data processing. Extract structured data from web pages into clean, usable JSON objects or arrays.
JSON Format Options
Output formats:
• Array of objects: [{name: 'John'}]
• Nested object: {headers: [...], data: [...]}
Type conversion: "123" → 123, "true" → true
Recommended Settings
Pro Tips
- •Use array of objects format for easy iteration in JavaScript: data.forEach(row => ...)
- •Auto-conversion handles numbers, booleans, and null values for proper JSON types
- •Perfect for feeding scraped web data directly into REST APIs or databases
- •Headers from <th> elements become JSON object keys - ensure they're unique and valid
Most Popular
Most users enable headers, array format, pretty print, and auto-convert numbers
When to Use This Tool
Extract tabular data from websites and convert to JSON for use in applications, APIs, and databases. Scrape product listings, pricing tables, statistics, and reports from web pages. JSON format makes it easy to process the data programmatically, store in NoSQL databases like MongoDB, or send to REST APIs. Essential for competitive analysis and market research.
Convert HTML email reports, dashboard tables, and legacy system outputs to JSON for API consumption. Many systems send data as HTML tables but your API needs JSON. Use this tool to transform HTML table data into proper JSON format for REST endpoints, GraphQL resolvers, or microservices. Enables integration between old and new systems.
Feed table data into JavaScript/TypeScript applications, React components, or data visualization libraries. Convert static HTML tables into dynamic JSON arrays that can be filtered, sorted, and manipulated. Perfect for building dashboards, admin panels, and data-driven UIs where you need to work with table data programmatically.
Import HTML table data into MongoDB, Firebase, or other JSON-based databases. Many legacy systems export to HTML but modern databases prefer JSON. Convert tables to JSON documents for bulk import operations. Also useful for data migration projects where source data is only available as HTML tables or web reports.
How It Works
Parse HTML input using DOMParser to create navigable DOM structure
Locate <table> element and select first or last table based on settings
Extract headers from <thead> or first row <th> elements
Process <tbody> rows, extracting text content from each cell
Remove HTML tags and decode entities to get clean text values
Auto-detect and convert numeric strings to numbers if enabled
Convert boolean strings ('true'/'false') and 'null' to proper types
Format as array of objects (headers as keys) or nested structure
Stringify to JSON with optional pretty printing (2-space indentation)
Output valid JSON ready for APIs, databases, or JavaScript consumption
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript with DOMParser for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What's the difference between array of objects and nested format?
Array of objects format produces: [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}] - each row is an object with header names as keys. This is the most common format for APIs and JavaScript iteration. Nested format produces: {headers: ['id', 'name'], data: [[1, 'John'], [2, 'Jane']]} - headers and data separated, useful when you need to preserve header order separately.
How does auto-conversion handle numbers and booleans?
When enabled, the tool automatically converts: numeric strings to numbers ('123' → 123, '45.67' → 45.67), boolean strings to booleans ('true' → true, 'false' → false), and the string 'null' to null. This creates proper JSON types instead of everything being strings. If disabled, all values remain as strings, which is safer when dealing with data like phone numbers or IDs that look like numbers but should stay as text.
Can I use this JSON with MongoDB or Firebase?
Yes! The array of objects format is perfect for MongoDB and Firebase. Each object in the array can be directly inserted as a document. Example: db.collection.insertMany(jsonData). The structure matches how these databases store data. Just ensure your table headers are valid database field names (avoid spaces, special characters, and start with letters).
What happens if table headers have duplicate names?
If headers are duplicated, later columns will overwrite earlier ones in the JSON object. For example, two columns named 'price' would result in only the second price value being kept. To avoid this, ensure table headers (<th> elements) are unique. If you can't control the HTML source, use the nested format which stores data as arrays instead of objects with keys.
Can I process the JSON in JavaScript after conversion?
Absolutely! Copy the JSON output and use JSON.parse() in JavaScript: const data = JSON.parse(jsonString). With array of objects format, you can easily map, filter, and reduce: data.filter(row => row.price > 100), data.map(row => row.name), etc. This makes it perfect for feeding into React components, D3.js visualizations, or any data processing pipeline.
Why use JSON instead of CSV for table data?
JSON preserves data types (numbers, booleans, null) while CSV treats everything as text. JSON supports nested structures and is native to JavaScript/APIs. It's self-describing with headers as keys, making it easier to work with programmatically. CSV is better for Excel/spreadsheets, but JSON is superior for web development, APIs, and modern databases. Use JSON when feeding data into applications, CSV when sharing with spreadsheet users.