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.
解決済! 解決策の投稿を見る。
トピックはコミュニティのコンテンツの分類に役立ち、関連コンテンツを発見する可能性を広げます。
表示
返信
いいね!の合計
Hi @Dyanamic,
There are a few clean approaches depending on your use case.
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.
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;
}
}
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.
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.
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.
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));
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.
Expose the servlet as /content/page.html.json
or /content/page.custom.json
.
@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.
表示
返信
いいね!の合計