magento 2 "Header already sent " issue when there is large data in array and json_encode function using in ajax controller

Question

I am developing functionality in Magento 2.3 version and calling controller function by using Ajax.

Controller function return product data and everything is working fine when customer is not login.

While when we try to login and return product data then it throw the error

"Exception: Warning: Cannot modify header information - headers already sent by (output started at app/code/Magento2/CustomProduct/Controller/Index/Index.php:74) in vendor/magento/framework/Stdlib/Cookie/PhpCookieManager.php on line 148 in vendor/magento/framework/App/ErrorHandler.php:61"

Below is the array and json_encode

public function execute() {

    foreach ($collection as $singleProduct):

        $imageUrl = $imageUrl;
        $html.='<div class="col-lg-3">';
        $html.='<p class="img_small"><a href="'.$singleProduct->getProductUrl().'"><img class="custom-category-imgs" src="' . $imageUrl . '" title="' . $singleProduct->getName() . '"></a></p>';
        $html.='<p class="cat_product"><a href="'.$singleProduct->getProductUrl().'">' . $singleProduct->getName() . '</a></p>';
        $html.='<p><a class="btn_blue" href="'.$singleProduct->getProductUrl().'" title="View">View</a></p>';
        $html.='</div>';


    endforeach;
    echo json_encode(array('html_data' => $html,'page_index' => $page));
}

and Ajax function is:

function load_product(category_id, page, current_obj) {
                setTimeout(function () {
                    $.ajax({
                        method: "POST",
                        url: controller_url,
                        async: true,
                        data: {cat_id: category_id, p: page},
                        success: function (data) {
                            //alert(data);
                            var result = JSON.parse(data);
                            $("#insert_div" + category_id).html(result.html_data);
                            if (current_obj != 'default_val') {
                                setActivePageing(current_obj);
                            } else {
                                setActivePageing('default_val');
                            }
                            $("#wait").hide();

                        }
                    })
                }, 2000);
            }

Please help anybody this is the strange issue.

Answer 1

If you're extending \Magento\Framework\App\Action\Action you need to return an instance of \Magento\Framework\Controller\ResultInterface.

I'm going to assume line 74 in your error is this echo json_encode(array('html_data' => $html,'page_index' => $page));

Try doing the following instead of echoing json_encode:

$resultJSON = $this->resultFactory
    ->create(ResultFactory::TYPE_JSON)
    ->setData(['html_data' => $html,'page_index' => $page]);
return $resultJSON

Note: If you get a console error "Unexpected token at line 0 in...", then try removing the JSON.parse(data) from your JS file and just use data as is, since jQuery.ajax will automatically determine the data-type based on MIME type of the response if you don't explicitly define dataType.