how to generate the json from the whole page which will have different block in the eds. | Community
Skip to main content
D
Dyanamic
Level 2
June 5, 2025
Solved

how to generate the json from the whole page which will have different block in the eds.

  • June 5, 2025
  • 3 replies
  • 695 views

Hi,

I have to provide the html of the page in the json format for third party integration.

I have created 1 page and authored multiple component on the page so I am good with the html structure/

ex. /content/company-eds/navigation-test/nav.plain.html  is the  path of the page and below is a sample html which I am getting for this page.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <div>
            <div class="main-navigation">
                <div>
                    <div>Tttle</div>
                </div>
                <div>
                    <div>subtitle</div>
                </div>
                <div>
                    <div></div>
                </div>
            </div>
            <div class="section-metadata"></div>
        </div>
        <div>
            <div class="utility-navigation">
                <div>
                    <div>Utility Nav</div>
                </div>
            </div>
       </div>
       <div>
            <div class="main-navigation">
                <div>
                    <div>shopper</div>
                </div>
                <div>
                    <div></div>
                </div>
            </div>
            <div class="featured-navigation">
                <div>
                    <div>featured 1</div>
                </div>
               
            </div>
     </div>       
   </body>
</html>

wull attached the html also.

on this page I have added multiple blocks, same html I have to provide in json format.

can we convert html to Json in eds?

or any other approach which I can follow. 

kindly revert with steps if any one has done same kind of implemetation.

 

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 arunpatidar

Hi @dyanamic 

In EDS you can't convert page to json, however you can deliver only content html using plain selector.

EDS only allow to expose spreadsheets as json file.

3 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
June 5, 2025

Hi @dyanamic,

There are a few clean approaches depending on your use case.

Option 1: Use AEM’s exporter framework (Recommended for structured JSON)

AEM Core Components support exporting structured JSON using the ModelExporter framework (Sling Models + Jackson/Gson). You can customize this to output block-wise JSON.

Steps:

  1. Create Sling Models for each component.

    • Annotate with @Exporter for application/json.

    @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL, resourceType = "your/component/resource/type") @Exporter(name = "jackson", extensions = "json") public class MainNavigationModel { @ValueMapValue private String title; public String getTitle() { return title; } }

  2. Access your page JSON like this:

    /content/your-page.model.json

    If your components are based on core components, many already support this out of the box.

Option 2: HTML to JSON conversion using JS/Java logic (for unstructured HTML)

If you're working with raw HTML (e.g., from nav.plain.html) and need to convert it to JSON, you'll have to parse the HTML and convert it manually to JSON.

Example Tools:

  • Java: Use jsoup to parse the HTML and generate a structured object.

  • Node.js: Use libraries like htmlparser2 or cheerio to parse DOM and map to JSON.

Example in Javascript&colon;
const cheerio = require('cheerio'); const html = `<div class="main-navigation"><div><div>Title</div></div></div>`; const $ = cheerio.load(html); const json = {}; $('.main-navigation').each((i, elem) => { json['main-navigation'] = { blocks: $(elem).find('div > div').map((i, el) => ({ content: $(el).text() })).get() }; }); console.log(JSON.stringify(json, null, 2));
Option 3: Custom Servlet to Render JSON from HTML Page

  1. Create a servlet that:

    • Fetches the rendered HTML of a page.

    • Parses it using Jsoup (Java) or similar.

    • Converts key sections (.main-navigation, .utility-navigation) to structured JSON.

  2. Expose the servlet as /content/page.html.json or /content/page.custom.json.

Santosh Sai
    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    June 5, 2025

    Hi @dyanamic 

    In EDS you can't convert page to json, however you can deliver only content html using plain selector.

    EDS only allow to expose spreadsheets as json file.

    Arun Patidar
      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      June 23, 2025

      @dyanamic Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you.

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...