{"id":1415,"date":"2020-11-27T04:40:47","date_gmt":"2020-11-27T04:40:47","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/return-json-response-from-controller-in-magento-2\/"},"modified":"2025-05-22T11:30:29","modified_gmt":"2025-05-22T06:00:29","slug":"return-json-response-from-controller-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/return-json-response-from-controller-in-magento-2\/","title":{"rendered":"How to Return a JSON Response from Controller in Magento 2"},"content":{"rendered":"\n

Magento 2 extension<\/a> development requires customization that fulfills the business requirements.<\/p>\n\n\n\n

While developing an extension, the developers may need customization that returns the data from the controller in the JSON format.<\/p>\n\n\n\n

When we make the AJAX request, the controller is called. In many cases, when we call a specific controller, we need to return data. For such cases, if we return data in JSON format, it would be a convenient option, especially when we need to return multiple values.<\/p>\n\n\n\n

For instance, when a customer selects the country, all the states of the selected country are being displayed.<\/p>\n\n\n\n

This post gives the programmatic solution to <\/strong><\/em>return a JSON response from controller in Magento 2.<\/p>\n\n\n\n

Solution to Return a JSON Response from Controller in Magento 2:<\/h2>\n\n\n\n

1. Create registration.php<\/strong> at app\/code\/Vendor\/Module<\/em><\/strong><\/p>\n\n\n\n

<?php\n\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(\n    ComponentRegistrar::MODULE,\n    'Vendor_Module',\n    __DIR__\n);<\/pre>\n\n\n\n
2. Create module.xml<\/strong> at app\/code\/Vendor\/Module\/etc<\/em><\/strong><\/strong><\/p>\n\n\n\n
<? xml version = \"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"Vendor_Module\" setup_version=\"1.0.0\">\n    <\/module>\n<\/config><\/pre>\n\n\n\n
3. Create index.php<\/em><\/strong> at app\/code\/Vendor\/Module\/Controller\/Index<\/em><\/strong><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\nuse Magento\\Framework\\App\\Action\\Action;\n\nclass Index extends Action\n{\n    protected $resultPageFactory;\n\n    public function __construct(Context $context, PageFactory $resultPageFactory)\n    {\n        parent::__construct($context);\n        $this->resultPageFactory = $resultPageFactory;\n    }\n\n    public function execute()\n    {\n        return $resultPage = $this->resultPageFactory->create();\n    }\n}<\/pre>\n\n\n\n
4. Create ReturnJson.php<\/strong> at app\/code\/Vendor\/Module\/Controller\/Index<\/em><\/strong><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\Controller\\Result\\JsonFactory;\n\nclass ReturnJson extends Action\n{\n\n    private $resultJsonFactory;\n\n    public function __construct(JsonFactory $resultJsonFactory, Context $context)\n    {\n        parent::__construct($context);\n        $this->resultJsonFactory = $resultJsonFactory;\n    }\n\n    public function execute()\n    {\n        $resultJson = $this->resultJsonFactory->create();\n        return $resultJson->setData(['json_data' => 'come from json']);\n    }\n}<\/pre>\n\n\n\n
5. Then, create routes.xml<\/strong> at app\/code\/Vendor\/Module\/etc\/frontend<\/em><\/strong><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\">\n    <router id=\"standard\">\n        <route id=\"module\" frontName=\"module\">\n            <module name=\"Vendor_Module\"\/>\n        <\/route>\n    <\/router>\n<\/config><\/pre>\n\n\n\n
6. Create module_index_index.xml <\/strong>at app\/code\/Vendor\/Module\/view\/frontend\/layout<\/em><\/strong><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"content\">\n            <block name=\"module_index_index\" template=\"Vendor_Module::template_file.phtml\" cacheable=\"false\"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
7. Create template_file.phtml <\/strong>at app\/code\/Vendor\/Module\/view\/frontend\/templates<\/em><\/strong><\/p>\n\n\n\n
<fieldset class=\"fieldset\">\n    <div class=\"field required\">\n        <label class=\"label\"\n               for=\"json_out\"><span><?php echo $block->escapeHtml(__('Output')) ?><\/span><\/label>\n        <div class=\"input-box control\">\n            <input name=\"json_out\" id=\"json_out\" title=\"<?php echo $block->escapeHtml(__('Output')) ?>\"\n                   value=\"\" class=\"input-text required-entry\" type=\"text\">\n        <\/div>\n    <\/div>\n    <div class=\"field\">\n        <div class=\"primary\">\n            <button type=\"submit\" class=\"action submit primary btn_put_json\"><span>Put Json Data<\/span><\/button>\n        <\/div>\n    <\/div>\n<\/fieldset>\n<script>\n    require(\n        [\n            'jquery'\n        ],\n        function (\n            $\n        ) {\n            $('body').on('click', '.btn_put_json', function () {\n\n                var self = $(this);\n                var url = \"<?php echo $block->getUrl() . 'module\/index\/ReturnJson' ?>\";\n                try {\n\n                    $.ajax({\n                        url: url,\n                        type: 'POST',\n                        dataType: 'json',\n                        showLoader: true,\n                        success: function (data) {\n                            $(\"#json_out\").val(data.json_data);\n                        }\n                    });\n                } catch (e) {\n                }\n\n            });\n        });\n\n<\/script>\u0325<\/pre>\n\n\n\n
Done!<\/p>\n\n\n\n
Please do consider sharing this post with Magento Community via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
Magento 2 extension development requires customization that fulfills the business requirements. While developing an extension, the developers may need customization that returns the data from the…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1415","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1415"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1415\/revisions"}],"predecessor-version":[{"id":14606,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1415\/revisions\/14606"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}