Dynamically populate dropdown from json

[Jitesh07]

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);

                }

    }

}

[giuseppebag]

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"

           })

[Jitesh07]

Hi @giuseppebag ,

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]

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]

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

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?

[Jitesh07]

Hi @arunpatidar 

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

[arunpatidar · Accepted solution]

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.

[kautuk_sahni]

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