The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> Parse the JSON
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:

<! -- Matter for Button 1 -->
<div class="collapse" id="collapseE1">
<div class="card card-body">
<div class="row">
<blockquote class="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>
<a href=" " class="btn btn-primary stretched-link" target="blank">Read</a>


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

I have a script like following:

.then(res => res.json())
.then(data => {
let tr = data.content.reduce((prev, cur) => {
let td = => `<td>${e}</td>`)
return prev + `<tr>${td.join("")}</tr>`
}, "\r")
document.querySelector("table").innerHTML = tr;


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

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: 25th March 2023 - 05:53 AM