How to get listChild from parent using JS API | Community
Skip to main content
Level 2
April 7, 2020
Solved

How to get listChild from parent using JS API

  • April 7, 2020
  • 1 reply
  • 2712 views

Hello i want to know how to get List Page under parent using JS API,

 

and i want to display it page with view of article, anyone can give me a suggestion? what should i do on JS, Thanks alot

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Theo_Pendle

Hello, 

To be honest I found your question quite confusing. From what I can understand you want to list the children of the current page or something, using the JS Use-API?

If so, then here is a solution you can start with.

Here is the JS script that will find all the child pages and extract the page title:

"use strict"; use(function () { var childTitles = []; var children = currentPage.listChildren(); for (var child in Iterator(children)) { childTitles.push(child.getTitle()); } return { children: childTitles, }; });

Here is the component HTL where we use the JS Use-API to call the script we just made and then display each child page title:

<div data-sly-use.model="script.js"> <ul data-sly-list="${model.children}"> <li>${item}</li> </ul> </div>

Here is where the files are stored (demo is the component):

Now I create a page with 2 children:

 

And if I place the demo component on test-page, here is the result:

Hopefully that helps.

 

1 reply

Theo_Pendle
Theo_PendleAccepted solution
Level 8
April 7, 2020

Hello, 

To be honest I found your question quite confusing. From what I can understand you want to list the children of the current page or something, using the JS Use-API?

If so, then here is a solution you can start with.

Here is the JS script that will find all the child pages and extract the page title:

"use strict"; use(function () { var childTitles = []; var children = currentPage.listChildren(); for (var child in Iterator(children)) { childTitles.push(child.getTitle()); } return { children: childTitles, }; });

Here is the component HTL where we use the JS Use-API to call the script we just made and then display each child page title:

<div data-sly-use.model="script.js"> <ul data-sly-list="${model.children}"> <li>${item}</li> </ul> </div>

Here is where the files are stored (demo is the component):

Now I create a page with 2 children:

 

And if I place the demo component on test-page, here is the result:

Hopefully that helps.

 

Theo_Pendle
Level 8
April 11, 2020
Hello, if my answer was helpful, could you please like it and select it as the correct answer?