Expand my Community achievements bar.

SOLVED

Aem 6.5 | i have json file in aem dam | how can i read it in sightly

Avatar

Level 2

Hi

i have json file in aem dam. I want to read it in sightly html ( of my aem component). 
May be shud get it in some data attribute… so i can display that in frontend… how can i do it..

using javascript or jquery ? Further i want to do some processing of this data element ( which holds all records of json) … i want to write a loop in sightly… like data.title(1) , data.description (1) , data.title(2) … how can i do that

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@SumanSatija4 : If the JSON is going to be at pre-specified fixed path, you can access it directly using JavaScript as well:

jQuery.getJSON('/content/dam/site-name/json-file-name.json', function (data) {
          //access JSON data elements using data.elementName
var jsonArrayObj = data;
//iterate over jsonArrayObj to get title, desription etc
}

Once you read the json, you can generate the HTML markup based on the json data using JS code.

For this to work in publisher, you may have to allow the JSON path in dispatcher as usually all/most .json requests should be blocked for various reasons. Please refer (how to allow your specific DAM path for your json to be access from your site using domain url) :https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-fetch-json-file-fro...

thanks.

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@SumanSatija4 : If the JSON is going to be at pre-specified fixed path, you can access it directly using JavaScript as well:

jQuery.getJSON('/content/dam/site-name/json-file-name.json', function (data) {
          //access JSON data elements using data.elementName
var jsonArrayObj = data;
//iterate over jsonArrayObj to get title, desription etc
}

Once you read the json, you can generate the HTML markup based on the json data using JS code.

For this to work in publisher, you may have to allow the JSON path in dispatcher as usually all/most .json requests should be blocked for various reasons. Please refer (how to allow your specific DAM path for your json to be access from your site using domain url) :https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-fetch-json-file-fro...

thanks.

Avatar

Community Advisor

Hi,

 

If you want to post-process the data using HTL, the best practice is to use a Sling model. With a Sling model, you can read the JSON file and perform all the necessary manipulations, allowing HTL to read and use the data seamlessly. If you choose to use JavaScript (jQuery or any other framework/library), then you will need to continue using JavaScript for manipulation and post-processing because HTL is server-side.

 

Hope this clarifies how to approach the solution

 



Esteban Bustamante

Avatar

Administrator

@SumanSatija4 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni