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.

[Hichem]

If you still need a solution, here it is:

To update the individual DIVs based on the category during the load of the page, you can modify your script as follows:

CODE

<script>
fetch('https://script.google.com/macros/s/AKfycbzz76WS63UCCo9ZripiLrS4Nf3iGsBMS_D7VU8wI9y7lI0ZhJvvXREtmnnpjWfAv23Lvw/exec')
.then(res => res.json())
.then(data => {
  let lessonsHTML = '';
  let booksHTML = '';
  let webpagesHTML = '';
  let videosHTML = '';
  let worksheetsHTML = '';
  let questionsHTML = '';
  
  data.content.forEach(row => {
    const category = row[0];
    const cardTitle = row[5];
    const cardText = row[1];
    const link = row[70];
    
    const cardHTML = `
      <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">${cardTitle}</h5>
            <p class="card-text">${cardText}</p>
          </div>
          <a href="${link}" class="btn btn-primary stretched-link" target="blank">Read</a>
        </div>
      </div>
    `;
    
    switch (category) {
      case 'Lessons':
        lessonsHTML += cardHTML;
        break;
      case 'Books':
        booksHTML += cardHTML;
        break;
      case 'Webpages':
        webpagesHTML += cardHTML;
        break;
      case 'Videos':
        videosHTML += cardHTML;
        break;
      case 'Worksheets':
        worksheetsHTML += cardHTML;
        break;
      case 'Questions':
        questionsHTML += cardHTML;
        break;
      default:
        break;
    }
  });
  
  document.querySelector('#Lessons').innerHTML = lessonsHTML;
  document.querySelector('#Books').innerHTML = booksHTML;
  document.querySelector('#Webpages').innerHTML = webpagesHTML;
  document.querySelector('#Videos').innerHTML = videosHTML;
  document.querySelector('#Worksheets').innerHTML = worksheetsHTML;
  document.querySelector('#Questions').innerHTML = questionsHTML;
});
</script>

Here, we first define variables to store the HTML code for each category (lessonsHTML, booksHTML, etc.). Then, we loop through each row of the data and extract the category, card title, card text, and link from the corresponding columns. We create the HTML code for the card using this information and append it to the appropriate category variable based on the category value.

Finally, we update the inner HTML of the respective DIVs (#Lessons, #Books, etc.) with the accumulated HTML code for each category.

[coothead]

Note

the fetch json appears to be for "Lesson" items only.

coothead

[coothead]

also Note

The "Read" links such as...

https://ncert.nic.in/textbook/pdf/keph101.pdf

...do not work.

coothead