JavaScript Help to Parse the JSON

[modakindia]

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/...BMS_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>

Above html code and Script both are working fine.

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.

 

[Antero360]

I have a code like following:



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

I have a script like following:



Above html code and Script both are working fine.

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.

HI there, it be helpful if you were to post a small sample of the JSON file, we can see how it's structured in order to give you the correct solution

 

[modakindia]

Hi. Thanks for your reply.

Please find sample JSON below.

{"content":[["Lessons","CBSE Class XI - Physics - Physical World | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit I - Physical World and Measurement - Chapter 1 - Physical World. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Physical World","","English","Website","https://ncert.nic.in/textbook/pdf/keph101.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit I, Physical World and Measurement, Chapter 1, Physical World, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Units and Measurement | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit I - Physical World and Measurement - Chapter 2 - Units and Measurement. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Units and Measurement","","English","Website","https://ncert.nic.in/textbook/pdf/keph102.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit I, Physical World and Measurement, Chapter 2, Units and Measurement, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Motion in a Straight Line | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit II - Kinematics - Chapter 3 - Motion in a Straight Line. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Motion in a Straight Line","","English","Website","https://ncert.nic.in/textbook/pdf/keph103.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit II, Kinematics, Chapter 3, Motion in a Straight Line, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Motion in a Plane | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit II - Kinematics - Chapter 4 - Motion in a Plane. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Motion in a Plane","","English","Website","https://ncert.nic.in/textbook/pdf/keph104.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit II, Kinematics, Chapter 4, Motion in a Plane, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Laws of Motion | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit III - Laws of Motion - Chapter 5 - Laws of Motion. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Laws of Motion","","English","Website","https://ncert.nic.in/textbook/pdf/keph105.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit III, Laws of Motion, Chapter 5, Laws of Motion, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Work, Energy and Power | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit IV - Work, Energy and Power - Chapter 6 - Work, Energy and Power. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Work, Energy and Power","","English","Website","https://ncert.nic.in/textbook/pdf/keph106.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit IV, Work, Energy and Power, Chapter 6, Work, Energy and Power, NCERT, Website"],["Lessons","CBSE Class XI - Physics - System of Particles and Rotational Motion | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit V - Motion of System of Particles and Rigid Body - Chapter 7 - System of Particles and Rotational Motion. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","System of Particles and Rotational Motion","","English","Website","https://ncert.nic.in/textbook/pdf/keph107.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit V, Motion of System of Particles and Rigid Body, Chapter 7, System of Particles and Rotational Motion, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Gravitation | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit VI - Gravitation - Chapter 8 - Gravitation. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Gravitation","","English","Website","https://ncert.nic.in/textbook/pdf/keph108.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit VI, Gravitation, Chapter 8, Gravitation, NCERT, Website"]]}

The same could be accessed with the below:

https://script.google.com/macros/s/AKfycbzz76WS63UCCo9ZripiLrS4Nf3iGsBMS_D7VU8wI9y7lI0ZhJvvXREtmnnpjWfAv23Lvw/exec

The same is mentioned in the script.

 

[modakindia]

I have written the code like following:

<script>
fetch('https://script.google.com/macros/s/...BMS_D7VU8wI9y7lI0ZhJvvXREtmnnpjWfAv23Lvw/exec')
.then(res => res.json())
.then(data => {
let lessons = data.content.reduce((prev1, item1) => {
if (item1[0] === "Lessons") {
return prev1 + `<div class="col">
<div class="card h-100">
<img src="https://img.youtube.com/vi/bukc6afm4ic/0.jpg" class="card-img-top img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">${item1[0]}</h5>
<p class="card-text">${item1[1]}</p>
</div>
<a href=${item1[16]} class="btn btn-primary stretched-link" target="blank">Read</a>
</div>
</div>`;
} else {
return prev1;
}
}, "");
document.querySelector("#Lessons").innerHTML = lessons;
let videos = data.content.reduce((prev2, item2) => {
if (item2[0] === "Videos") {
return prev2 + `<div class="col">
<div class="card h-100">
<img src="https://img.youtube.com/vi/bukc6afm4ic/0.jpg" class="card-img-top img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">${item2[0]}</h5>
<p class="card-text">${item2[1]}</p>
</div>
<a href=${item2[16]} class="btn btn-primary stretched-link" target="blank">Play Video</a>
</div>
</div>`;
} else {
return prev2;
}
}, "");
document.querySelector("#Videos").innerHTML = videos;
});

</script>

The above code is working fine.

Is it a correct code? Is it processing double? Is it possible to write within a single If ... Else logic for different DIV based on ITEM[0]?

 

[Johna]

Hi. Thanks for your reply.

Please find sample JSON below.

{"content":[["Lessons","CBSE Class XI - Physics - Physical World | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit I - Physical World and Measurement - Chapter 1 - Physical World. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Physical World","","English","Website","https://ncert.nic.in/textbook/pdf/keph101.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit I, Physical World and Measurement, Chapter 1, Physical World, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Units and Measurement | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit I - Physical World and Measurement - Chapter 2 - Units and Measurement. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Units and Measurement","","English","Website","https://ncert.nic.in/textbook/pdf/keph102.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit I, Physical World and Measurement, Chapter 2, Units and Measurement, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Motion in a Straight Line | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit II - Kinematics - Chapter 3 - Motion in a Straight Line. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Motion in a Straight Line","","English","Website","https://ncert.nic.in/textbook/pdf/keph103.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit II, Kinematics, Chapter 3, Motion in a Straight Line, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Motion in a Plane | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit II - Kinematics - Chapter 4 - Motion in a Plane. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Motion in a Plane","","English","Website","https://ncert.nic.in/textbook/pdf/keph104.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit II, Kinematics, Chapter 4, Motion in a Plane, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Laws of Motion | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit III - Laws of Motion - Chapter 5 - Laws of Motion. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Laws of Motion","","English","Website","https://ncert.nic.in/textbook/pdf/keph105.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit III, Laws of Motion, Chapter 5, Laws of Motion, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Work, Energy and Power | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit IV - Work, Energy and Power - Chapter 6 - Work, Energy and Power. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Work, Energy and Power","","English","Website","https://ncert.nic.in/textbook/pdf/keph106.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit IV, Work, Energy and Power, Chapter 6, Work, Energy and Power, NCERT, Website"],["Lessons","CBSE Class XI - Physics - System of Particles and Rotational Motion | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit V - Motion of System of Particles and Rigid Body - Chapter 7 - System of Particles and Rotational Motion. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","System of Particles and Rotational Motion","","English","Website","https://ncert.nic.in/textbook/pdf/keph107.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit V, Motion of System of Particles and Rigid Body, Chapter 7, System of Particles and Rotational Motion, NCERT, Website"],["Lessons","CBSE Class XI - Physics - Gravitation | NCERT","A lesson related to CBSE - Senior Secondary - Class XI - Physics - Unit VI - Gravitation - Chapter 8 - Gravitation. Credit: NCERT, Website","India","CBSE","NCERT","NCERT","Senior Secondary","Class XI","Physics","English","School","Gravitation","","English","Website","https://ncert.nic.in/textbook/pdf/keph108.pdf","","CBSE, Senior Secondary, Class XI, Physics, Unit VI, Gravitation, Chapter 8, Gravitation, NCERT, Website"]]}

The same could be accessed with the below:

https://script.google.com/macros/s/AKfycbzz76WS63UCCo9ZripiLrS4Nf3iGsBMS_D7VU8wI9y7lI0ZhJvvXREtmnnpjWfAv23Lvw/exec

The same is mentioned in the script.

Post the code formatted and in the code block (the button that looks like </>)