Dynamically populate dropdown from json | Community
Skip to main content
J
Jitesh07
Level 2
May 20, 2025
Solved

Dynamically populate dropdown from json

  • May 20, 2025
  • 4 replies
  • 905 views
Hi Team,
Can someone help me solving below error? Below is my code to dynamically populate dropdown from a json file but it is not working. I have followed the tutorial given by @arunpatidar . I am getting below error in my code:
20.05.2025 17:21:58.487 *ERROR* [[0:0:0:0:0:0:0:1] [1747741918452] GET /mnt/override/apps/mysite/components/content/dynamicdropdown/_cq_dialog.html/content/mysite/us/en/demo-page/jcr:content/root/container/container/dynamicdropdown HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource TypeOverwritingResourceWrapper, type=/bin/mysite/datasource, path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resource=[FilteringResourceWrapper, type=granite/ui/components/coral/foundation/form/select, path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resource=[FilteringResourceWrapper, type=granite/ui/components/coral/foundation/form/select, path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resource=[MergedResource [path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resources=[/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown]]]]]
 
 
 
 
package com.mysite.core.servlets;


import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceMetadata;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ResourceUtil;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.sling.commons.json.JSONArray;
import org.apache.sling.commons.json.JSONObject;
import org.apache.sling.servlets.annotations.SlingServletResourceTypes;

import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.adobe.cq.commerce.common.ValueMapDecorator;
import com.adobe.granite.ui.components.ds.EmptyDataSource;
import com.adobe.granite.ui.components.ds.SimpleDataSource;
import com.adobe.granite.ui.components.ds.ValueMapResource;
import com.adobe.granite.ui.components.ds.DataSource;

import javax.jcr.Node;
import javax.servlet.Servlet;
import javax.servlet.ServletException;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.apache.sling.api.servlets.HttpConstants;

@Component(service = Servlet.class
    , property = {
        "sling.servlet.resourceType =" +  "/apps/mysite/components/dynamicdropdown",
        "sling.servlet.methods=" + HttpConstants.METHOD_GET
    }
)
public class DataSourceJson extends SlingSafeMethodsServlet {
   
    Logger logger = LoggerFactory.getLogger(this.getClass());

    protected final String  OPTIONS_PROPERTY = "options";

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)
            throws ServletException, IOException {
        // Your logic to handle GET requests
       
                try {
                    ResourceResolver resourceResolver = request.getResourceResolver();
                    request.setAttribute(DataSource.class.getName(), EmptyDataSource.instance());

                    Resource datasource = request.getResource().getChild("datasource");
                    ValueMap valueMap = ResourceUtil.getValueMap(datasource);
                    String genericListPath = valueMap.get(OPTIONS_PROPERTY, String.class);

                    if (genericListPath !=null) {
                        Node cfNode = request.getResource().getResourceResolver().getResource(genericListPath+"/jcr:content").adaptTo(Node.class);
                        InputStream in = cfNode.getProperty("jcr:data").getBinary().getStream();
                        BufferedReader reader = new BufferedReader(new InputStreamReader(in));
                        StringBuilder out = new StringBuilder();
                        String line;

                        while ((line = reader.readLine()) != null) {
                    out.append(line);
                }
                reader.close();
               
                JSONArray jsonArray = new JSONArray(out.toString());
                ValueMap vm = null;
                List<Resource> optionResourceList = new ArrayList<Resource>();

                for (int i = 0; i < jsonArray.length(); i++) {
                    JSONObject json = jsonArray.getJSONObject(i);
                    String Text = "";
                    String Value = "";
                    vm = new ValueMapDecorator(new HashMap<String, Object>());
                    Text = json.getString("text");
                    Value = json.getString("value");

                    vm.put("value", Value);
                    vm.put("text", Text);
                    optionResourceList
                    .add(new ValueMapResource(resourceResolver, new ResourceMetadata(), "nt:unstructured", vm));

                }
                        DataSource ds = new SimpleDataSource(optionResourceList.iterator());
                    request.setAttribute(com.adobe.granite.ui.components.ds.DataSource.class.getName(), ds);
                    } else {
                        logger.info("JSON file is not found ");
                    }



                } catch (Exception e) {
                    logger.info("Error in Get Drop Down Values", e);
                }

    }

}
 

 

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 @jitesh07 

Seems you added resourcetype 

type=/bin/mysite/datasource

and servlet is registered with another path .

Could you please use same resourcetype which mentioned in the blog and once works then you can adjust accordingly.

4 replies

giuseppebaglio
giuseppebaglio
Level 10
May 20, 2025

hi @jitesh07, what guide did you followed?

I can see from the error this: 

type=/bin/mysite/datasource

Try to update the servlet with the following:

@Component(service=Servlet.class, property={ Constants.SERVICE_DESCRIPTION + "=Simple Demo Servlet", "sling.servlet.methods=" + HttpConstants.METHOD_GET, "sling.servlet.paths="+ "/bin/mysite/datasource" })

 

    J
    Jitesh07Author
    Level 2
    May 20, 2025

    Hi @giuseppebaglio ,

    I followed this guide:

    https://medium.com/@arunpatidar26/dynamic-touch-ui-dropdown-using-json-data-0a450abad03e

     

    I tried above code but the error is still the same.

    20.05.2025 18:24:03.544 *ERROR* [[0:0:0:0:0:0:0:1] [1747745643522] GET /mnt/override/apps/mysite/components/content/dynamicdropdown/_cq_dialog.html/content/mysite/us/en/demo-page/jcr:content/root/container/container/dynamicdropdown HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource TypeOverwritingResourceWrapper, type=/bin/mysite/datasource, path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resource=[FilteringResourceWrapper, type=granite/ui/components/coral/foundation/form/select, path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resource=[FilteringResourceWrapper, type=granite/ui/components/coral/foundation/form/select, path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resource=[MergedResource [path=/mnt/override/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown, resources=[/apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown]]]]]

     

    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    May 20, 2025

    Hi @jitesh07 ,

     

    Your dropdown field is pointing to a sling:resourceType = /bin/mysite/datasource, which is not a valid resource type, it's a servlet path.

    AEM is trying to render this path as a component resource in the dialog, which it can't hence the renderer error.

    You need to keep the sling:resourceType of the dropdown field as:

    granite/ui/components/coral/foundation/form/select

    And use a datasource node inside it that has:

    sling:resourceType = mysite/components/datasource

    That sling:resourceType must match the resource type your servlet is registered against, not a servlet path (/bin/...).

    1. Update Servlet Registration

    Update your servlet registration to this:

    @Component(service = Servlet.class, property = { "sling.servlet.resourceTypes=mysite/components/datasource", "sling.servlet.methods=" + HttpConstants.METHOD_GET } )

    NOT sling.servlet.paths, and definitely NOT /bin/... as a resourceType.

     

    2. Update Dialog Structure in CRX/DE

    Inside your dialog at:

    /apps/mysite/components/content/dynamicdropdown/cq:dialog/content/items/column/items/dropdown

    It should have:

    sling:resourceType = granite/ui/components/coral/foundation/form/select

    And under this node, you should add a child node:

    Name: datasource Type: nt:unstructured Properties: sling:resourceType = mysite/components/datasource options = /content/dam/mysite/json/options.json

    options is a custom property you’re reading from in your servlet (valueMap.get("options", String.class)).

     

    3. Ensure JSON Exists at Path

    In CRX/DE, confirm:

    /content/dam/mysite/json/options.json/jcr:content

    Has the binary property:

    jcr:data -> your JSON content

    You can upload this via Assets console or directly as a file.

     

    4. Final Dialog Structure (Visual)

    Here’s how the dropdown node should look:

    dropdown (granite/ui/components/coral/foundation/form/select) └── datasource (nt:unstructured) ├── sling:resourceType = mysite/components/datasource └── options = /content/dam/mysite/json/options.json

    Sometimes OSGi doesn’t recognize a new servlet immediately rebuild your core bundle or restart AEM if required.

    Regards,
    Amit

     

    Imran Khan
    Community Advisor
    Imran KhanCommunity Advisor
    Community Advisor
    May 20, 2025

    @jitesh07 

    Make sure your dialog structure is correct, especially around:

     
    xml
    /items /column /items /dropdown (select field) sling:resourceType="granite/ui/components/coral/foundation/form/select" /datasource sling:resourceType="/apps/mysite/components/dynamicdropdown" 
      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      May 21, 2025

      Hi @jitesh07 

      Could you please share the blog like? Are you following https://aemlab.blogspot.com/2019/07/aem-touch-ui-dropdown-from-json.html?

      Arun Patidar
        J
        Jitesh07Author
        Level 2
        May 22, 2025

        Hi @arunpatidar 

         

        I am following this blog - https://medium.com/@arunpatidar26/dynamic-touch-ui-dropdown-using-json-data-0a450abad03e

        arunpatidar
        Community Advisor
        arunpatidarCommunity AdvisorAccepted solution
        Community Advisor
        May 23, 2025

        Hi @jitesh07 

        Seems you added resourcetype 

        type=/bin/mysite/datasource

        and servlet is registered with another path .

        Could you please use same resourcetype which mentioned in the blog and once works then you can adjust accordingly.

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

          @jitesh07 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...