Generate html tags from JSON

Question

What I'm intending to do is generating span for each word of my subtitle text which is in a JSON.

The JSON I have :

var sub_info = [
                {'start': 3.92, 'end': 6.84, 
                'words': ['So', 'assessing', 'the', 'situation.', 'Are', 
                'they', 'breathing?']}
                {'start': 7.5, 'end': 10.82, 
                'words': ['No,', 'Rose,', 'they', 'are', 'not', 
                'breathing.']}]

I want to grab each word, make a span for all the words inside the timestamp, and append them to a div.

The result should look something like this:

<div id='subs'>
 <span class='popoverOption' title='So' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="something">
                So
            </span>
            <span class='popoverOption' title='assessing' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content=" something" >
                assessing
            </span>
            <span class='popoverOption' title='the' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="something" >
                the
            </span>
            <span class='popoverOption' title='situation' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="something" >
                situation
            </span>
</div>

I've already written a function that syncs the subtitle with the video, but I gave it the whole text not split words:

videoPlayer.addEventListener("timeupdate", myFunc);
            
            function myFunc() {
                const activeSubtitle = sub_info.find(
                    (sub) =>
                    parseFloat(sub.start) <= videoPlayer.currentTime &&
                    parseFloat(sub.end) >= videoPlayer.currentTime
                );
                if (activeSubtitle) {
                    subtitles.innerHTML = activeSubtitle.text;
                } else {
                    subtitles.innerHTML = " ";
                }
                }

But how can I generate dynamic spans with a specific class and other attributes in each timestamp for each word?

Thanks in advance for your help.

Answer 1

var sub_info = [{
    'start': 3.92,
    'end': 6.84,
    'words': ['So', 'assessing', 'the', 'situation.', 'Are',
      'they', 'breathing?'
    ]
  },
  {
    'start': 7.5,
    'end': 10.82,
    'words': ['No,', 'Rose,', 'they', 'are', 'not',
      'breathing.'
    ]
  }
]

sub_info.forEach(obj => {
  obj.words.forEach(word => {
    let tag = '<span class="popoverOption" title="' + word + '" type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content=" something" >' + word + '</span>';
    document.querySelector('#output').innerHTML += tag;
  })
})

.popoverOption {
  display: block;
  border: 1px solid #ccc;
  padding: 5px;
}

<div id='output'></div>