How to .map around things inside another .map

Question

I have a main array of options and inside it there are array of values, I am using vanilla js and want to map around the first array (options) and then inside that map, I want to map around another array(values). But this is not working, what can be the solution for this?

test.innerHTML = match_id.options.map((modalVari, indexVariposition) => {
     return   `
    <fieldset class="modal-variant-form">
        <legend class="modal-variant-title">${modalVari.name}:</legend>`
        + modalVari.values.map(varival => (`<li>${varival}</li>`)).join("")
    `</fieldset>
    `
    });

Answer 1

this works as expected, so the problem is another

const data = [{name: 'one', values: [1, 2, 3]}, {name: 'two', values: [4, 5, 6]}]

const test = document.getElementById('test')

test.innerHTML = data.map((modalVari, indexVariposition) => {
     return   `
    <fieldset class="modal-variant-form">
        <legend class="modal-variant-title">${modalVari.name}:</legend>
        <ul>${modalVari.values.map(varival => (`<li>${varival}</li>`)).join("")}</ul>
    </fieldset>
    `
    }).join('');

<div id="test"></div>