Converting HTML Attribute String to Multidimensional JavaScript Array in Custom Web Component

Other Questions JavaScript
1

I’m building a custom web component that displays data in a table format. The component uses a special attribute called tableSettings to define how each column should work. This attribute contains info about the field name, display label, and column width as nested arrays.

Here’s how I set up the component:

<data-table tableSettings="['Name', 'Full Name', '40'], ['Email', 'Email Address', '60']"></data-table>

The 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 columns from my data should be shown. I grab the first data record to create table headers:

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

The problem is that tableSettings comes as a string and I can’t use .map() on it. When I try Array(tableSettings) or Array.from(tableSettings), I just get individual characters.

I also tried switching quotes:

<data-table tableSettings='["Name", "Full Name", "40"], ["Email", "Email Address", "60"]'></data-table>

And adding outer brackets:

<data-table tableSettings="[['Name', 'Full Name', '40'], ['Email', 'Email Address', '60']]"></data-table>

Nothing works except using eval() which I really don’t want to do for security reasons. How do I properly convert this string into a real nested array structure?

2

I’ve hit this exact issue building data grid components. Here’s what works - use JSON.parse() but escape your quotes properly in the HTML attribute. Don’t mess with nested quotes. Do this instead:

<data-table tableSettings='[["Name", "Full Name", "40"], ["Email", "Email Address", "60"]]'></data-table>

Then parse it:

const settings = JSON.parse(this.getAttribute('tableSettings'));

You can also store the config as a data attribute using JSON.stringify() when setting it programmatically - handles escaping automatically. Way more reliable with dynamic data. If you want slightly better security, use Function() constructor instead of eval(), but JSON parsing is still cleanest. Just make sure your attribute string matches valid JSON format exactly.

3

You need JSON.parse() to convert your string into a proper array. The problem is your HTML attribute string isn’t valid JSON format.

You were close when you added the outer brackets, but the syntax still wasn’t right. Make sure your attribute follows proper JSON syntax - double quotes around all strings and the whole thing wrapped in square brackets.

Your HTML should look like this:

<data-table tableSettings='[["Name", "Full Name", "40"], ["Email", "Email Address", "60"]]'></data-table>

Then in your JavaScript:

const tableSettings = JSON.parse(this.getAttribute('tableSettings'));
this.buildTable(records, tableElement, tableSettings);

I hit this exact same problem building custom components last year. Get the JSON syntax right in the HTML attribute and JSON.parse() handles everything perfectly. Then you can use .map() and other array methods without issues.

4

Hit this before too - try splitting the attribute parsing from the HTML. Set up your component to accept data as a property instead of a string attribute, then pass the parsed array directly. Like document.querySelector('data-table').tableSettings = [['Name', 'Full Name', '40']] - avoids the whole JSON parsing mess and works way better IMO.