コミュニティアチーブメントバーを展開する。

Submissions are now open for the 2026 Adobe Experience Maker Awards.
解決済み

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

Avatar

Level 2

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.

 

トピック

トピックはコミュニティのコンテンツの分類に役立ち、関連コンテンツを発見する可能性を広げます。

1 受け入れられたソリューション

Avatar

正解者
Community Advisor

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

AEM LinksLinkedIn

元の投稿で解決策を見る

3 返信

Avatar

Community Advisor

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

AEM BlogsLinkedIn


Avatar

正解者
Community Advisor

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

AEM LinksLinkedIn

Avatar

Administrator

@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