Converting HTML Attribute String to Multi-Dimensional JavaScript Array for Custom Web Component

Other Questions JavaScript
1

I’m building a custom web component that creates tables dynamically. The component uses a special attribute called tableSettings to define how columns should be displayed. This attribute contains nested arrays with column info like database field name, display label, and width percentage.

<custom-table tableSettings="['UserId', 'User ID', '15'], ['FullName', 'Name', '60'], ['Status', 'Active', '25']"></custom-table>

My component reads this attribute and sends it to a function that builds the table:

this.buildTable(records, tableElement, this.getAttribute('tableSettings'));

I need to use the tableSettings to filter which database columns appear in my table. I grab the first record from my data to create table headers:

Object.keys(firstRecord).forEach(fieldName => {
  if (tableSettings.map(config => config[0]).includes(fieldName)) {
    const cell = headerRow.insertCell();
    cell.textContent = config[1];
    cell.style.cssText = 'width: ${config[2]}%';
  }
});

The problem is that tableSettings comes in as a string and I can’t use .map() on it. When I try to convert it with Array(tableSettings) or Array.from(tableSettings), I just get an array of individual characters instead of the nested structure I need.

I tried switching the quotes around:

<custom-table tableSettings='["UserId", "User ID", "15"], ["FullName", "Name", "60"]'></custom-table>

I also tried wrapping everything in outer brackets:

<custom-table tableSettings="[['UserId', 'User ID', '15'], ['FullName', 'Name', '60']]"></custom-table>

Nothing works. How can I properly convert this string representation into a real nested array without using eval() which I know is dangerous?

2

Had this exact problem building my own table component last year. The JSON approach works, but I went with a simpler attribute format instead. Rather than stuffing complex nested arrays into HTML attributes, I use a delimiter-based string that’s way easier to parse. Something like tableSettings=\"UserId|User ID|15,FullName|Name|60,Status|Active|25\" then split it in JavaScript with this.getAttribute('tableSettings').split(',').map(row => row.split('|')). Gets you the same nested array structure without the JSON headaches. Parsing’s more forgiving and you don’t have to worry about escaping quotes or broken JSON killing your component. Been using this in production for months with zero issues.

3

HTML attributes are always strings, so you need to parse them into proper JavaScript data structures. Your second attempt was close - you just need valid JSON formatting and JSON.parse(). Make sure your attribute follows JSON syntax exactly. Don’t mix single and double quotes: . Then parse it in your JavaScript: const tableSettings = JSON.parse(this.getAttribute(‘tableSettings’)); this.buildTable(records, tableElement, tableSettings); I’ve used this in several custom components and it works great. Just make sure your JSON is valid - any syntax errors will break it. You might want to wrap JSON.parse() in a try-catch block for better error handling.

4

I’ve hit this same issue building dashboard components. Manual parsing works but gets messy quick with lots of dynamic tables.

You need a workflow that handles conversion automatically. I built one with Latenode that watches component configs, parses attribute strings, validates structure, and feeds clean arrays back to components.

Best part? Built-in validation rules. Bad data or missing columns get caught before your component breaks. You can add transformation steps too - pull column definitions from databases or APIs instead of hardcoding in HTML.

I also standardize table configs across components. One workflow handles all parsing logic, every custom table hits the same endpoint. Much cleaner than copying JSON.parse() everywhere.

Check it out at https://latenode.com

5

you gotta tweak the string a bit: wrap it in brackets and change to double quotes. like: tableSettings='[["UserId", "User ID", "15"], ["FullName", "Name", "60"]]'. then just run JSON.parse(this.getAttribute('tableSettings')) and it should work!