The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Parse the JSON
Swarup
post Feb 16 2023, 02:03 AM
Post #1





Group: Members
Posts: 2
Joined: 22-September 22
Member No.: 28,564



I have a code like following:

QUOTE
<! -- 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:

QUOTE
<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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hichem
post Apr 7 2023, 10:26 AM
Post #2





Group: Members
Posts: 1
Joined: 5-April 23
Member No.: 28,889



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 7 2023, 11:56 AM
Post #3


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743




Note

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


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 7 2023, 01:37 PM
Post #4


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743




also Note

The "Read" links such as...

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

...do not work. IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:50 AM