How can I create an HTML table with content taken from a javascript array?-CodePudding

I'm new to HTML and javascript so need assistance with some of the basics....

I have a javascript file with an array of elements:


export let options = [
    {
        att1: "opt1",
        att2: "some val 1",
        att3: 1,
        att4: 5,
    },
    {
        att1: "opt2",
        att2: "some val 2",
        att3: 2,
        att4: 2,
    },
    {
        att1: "opt3",
        att2: "some val 3",
        att3: 33,
        att4: 10,
    }
]

I want to create an HTML table (using the 'table' tag) with this array's content which will have the following format:

	Option 1	Option 2	Option 3
att1	opt1	opt2	opt3
att2	some val 1	some val 2	some val 3
att3	1	2	33
att4	5	2	10

How can I do it? I'm not sure wether it's possible or not, but I prefer the table's size/headers/attributes' names to be taken from the array itself and not to define them manually. In addition, I cannot touch the file with the array, i.e. I can only import it to another javascript file or src it in the HTML.

Thanks in advance, a confused newbie