Parse the JSON Options

[Swarup]

I have a code like following:

<! -- Matter for Button 1 -->
<div class="collapse" id="collapseE1">
<div class="card card-body">
<div class="row">
<blockquote class="blockquote">
<p>Lessons</p>
</blockquote>
<div id="Lessons" class="row row-cols-1 row-cols-md-3 g-4">

<! -- Lessons 1 -->
<div class="col">
<div class="card h-100">
<img src=" " class="card-img-top img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Lesson</h5>
<p class="card-text">CBSE Class XI - Physics - Motion in a Straight Line | <b>NCERT</b></p>
</div>
<a href=" " class="btn btn-primary stretched-link" target="blank">Read</a>
</div>
</div>


</div>
</div>
</div>
</div>

There is also separate DIV for Books, Webpages, Videos, Worksheets, Questions.

I have a script like following:

<script>
fetch('https://script.google.com/macros/s/AKfycbzz76WS63UCCo9ZripiLrS4Nf3iGsBMS_D7VU8wI9y7lI0ZhJvvXREtmnnpjWfAv23Lvw/exec')
.then(res => res.json())
.then(data => {
let tr = data.content.reduce((prev, cur) => {
let td = cur.map(e => `<td>${e}</td>`)
return prev + `<tr>${td.join("")}</tr>`
}, "\r")
document.querySelector("table").innerHTML = tr;

});
</script>

The First Line of JSON is Lessons, Books, Webpages, Videos, Worksheets, Questions. Based on the same I would like to update the individual DIV as per the category during load of the page.

Card Title is available in the Sixth Line of JSON.
Card Text is available in the Second Line of JSON.
Link is available in the Seventieth Line of JSON.

Need help to improve the Script accordingly.