How to render ZF2 view within JSON response?

Question

So far, I have figured out how to return a typical JSON response in Zend Framework 2. First, I added the ViewJsonStrategy to the strategies section of the view_manager configuration. Then, instead of returning a ViewModel instance from the controller action, I return a JsonModel instance with all my variables set.

Now that I've figured that piece out, I need to understand how to render a view and return it within that JSON response. In ZF1, I was able to use $this->view->render($scriptName), which returned the HTML as a string. In ZF2, the Zend\View\View::render(...) method returns void.

So... how can I render an HTML view script and return it in a JSON response in one request?

This is what I have right now:

    if ($this->getRequest()->isXmlHttpRequest()) {
        $jsonModel = new JsonModel(...);

        /* @todo Render HTML script into `$html` variable, and add to `JsonModel` */
        return $jsonModel;
    } else {
        return new ViewModel(...);
    }

Thoreau

Hey I'm just returning to it since i'm at it, too. What exactly is your problem though? When you return a jsonModel(array($data)), then the response is json. You do not want to render any view or whatsoever when returning json Oo – Excruciation

I need to render a partial view inside the JSON response. Example: {"html":"<tr><td>I'm an HTML response</td></tr>"}. – Thoreau

Answer 1

OK, i think i finally understood what you're doing. I've found a solution that i think matches your criteria. Though i am sure that there is room for improvement, as there's some nasty handwork to be done...

public function indexAction()
{
  if (!$this->getRequest()->isXmlHttpRequest()) {
    return array();
  }

  $htmlViewPart = new ViewModel();
  $htmlViewPart->setTerminal(true)
               ->setTemplate('module/controller/action')
               ->setVariables(array(
                  'key' => 'value'
               ));

  $htmlOutput = $this->getServiceLocator()
                     ->get('viewrenderer')
                     ->render($htmlViewPart);

  $jsonModel = new JsonModel();
  $jsonModel->setVariables(array(
    'html' => $htmlOutput,
    'jsonVar1' => 'jsonVal2',
    'jsonArray' => array(1,2,3,4,5,6)
  ));

  return $jsonModel;
}

As you can see, the templateMap i create is ... nasty ... it's annoying and i'm sure it can be improved by quite a bit. It's a working solution but just not a clean one. Maybe somehow one would be able to grab the, probably already instantiated, default PhpRenderer from the ServiceLocator with it's template- and path-mapping and then it should be cleaner.

Thanks to the comment ot @DrBeza the work needed to be done could be reduced by a fair amount. Now, as I'd initially wanted, we will grab the viewrenderer with all the template mapping intact and simply render the ViewModel directly. The only important factor is that you need to specify the fully qualified template to render (e.g.: "$module/$controller/$action")

I hope this will get you started though ;)

PS: Response looks like this:

Object:
    html: "<h1>Hello World</h1>"
    jsonArray: Array[6]
    jsonVar1: "jsonVal2"

Excruciation

I appreciate the response, but I feel like a broken record. This is helpful, but it doesn't answer my question. I need to return the HTML in a JSON response, which will include other variables -- potentially multiple views. – Thoreau

@Thoreau I've editted my answer, i hope this will get you started. – Excruciation

The isXmlHttpRequest() can be ignored btw, was just for me to render my template from which i call the ajax-request ;) – Excruciation

@Excruciation You can shortcut all of that with: $htmlOutput = $this->getServiceLocator()->get('viewrenderer')->render('test/test', $viewModel). – Rimskykorsakov

@Rimskykorsakov Thanks for clarifying, i thought that it'd be possible to do, but simple didn't know how to :) I'll try and modify the answer :) – Excruciation

Thanks for the help everyone. This is great. In addition to helping me, I'm sure it will help others to migrate from ZF1 to ZF2. – Thoreau

I'm glad this helped you. I learned something from it again :) Thanks to Beza – Excruciation

@Excruciation incase I just need to render html from my ajax call. Which is faster ViewModel or JsonModel ? – Piglet

@Deepanshu neither nor, depends on the dataformat you want to return. JsonModel for json format, viewmodel for text/html – Excruciation

If you're using Twig then replace get('viewrenderer') with get('ZfcTwigRenderer') – Kava

While I like the result of your approach, I dislike the code within your controller action. I prefer this to be done "automagically". It took some time to do that, but you can find my approach here: github.com/antiphp/html-json-view. It contains its own view model, renderer and strategy by combining ZF's PhpRenderer and JsonRenderer. – Algia

@Algia I do agree that all this code inside a Controller is not nice (especially the ViewRenderer would need to be injected). However it doesn't really make sense to output a JsonModel that only contains an HTML key. Sending a normal text/html in this case is simply faster and easier to implement in all cases. It's only when putting out more keys that the approach displayed here is good to be done. Kudos tho for writing your own viewmodel implementation! Not many people would do this ;) – Excruciation

I loved the answer but just wanted to correct one thing here is that, its not 'model' but 'module' in setTemplate. check out this link framework.zend.com/manual/current/en/modules/… – Buchheim

Answer 2

You can use more easy way to render view for your JSON response.

public function indexAction() {
    $partial = $this->getServiceLocator()->get('viewhelpermanager')->get('partial');
    $data = array(
            'html' => $partial('MyModule/MyPartView.phtml', array("key" => "value")),
            'jsonVar1' => 'jsonVal2',
            'jsonArray' => array(1, 2, 3, 4, 5, 6));
    $isAjax = $this->getRequest()->isXmlHttpRequest());
    return isAjax?new JsonModel($data):new ViewModel($data);
}

Please note before use JsonModel class you need to config View Manager in module.config.php file of your module.

'view_manager' => array(
        .................
        'strategies' => array(
            'ViewJsonStrategy',
        ),
        .................
    ),

it is work for me and hope it help you.

Pulsation

Answer 3

In ZF 3 you can achieve the same result with this code

MyControllerFactory.php

public function __invoke(ContainerInterface $container, $requestedName, array $options = null)
{
    $renderer = $container->get('ViewRenderer');

    return new MyController(
        $renderer
    );
}

MyController.php

private $renderer;

public function __construct($renderer) {
    $this->renderer = $renderer;
}

public function indexAction() {

    $htmlViewPart = new ViewModel();
    $htmlViewPart
            ->setTerminal(true)
            ->setTemplate('module/controller/action')
            ->setVariables(array('key' => 'value'));

    $htmlOutput = $this->renderer->render($htmlViewPart);

    $json = \Zend\Json\Json::encode(
        array(
            'html' => $htmlOutput,
            'jsonVar1' => 'jsonVal2',
            'jsonArray' => array(1, 2, 3, 4, 5, 6)
        )
    );

    $response = $this->getResponse();
    $response->setContent($json);

    $response->getHeaders()->addHeaders(array(
        'Content-Type' => 'application/json',
    ));
    return $this->response;
}

Collative

Answer 4

As usual framework developer mess thing about AJAX following the rule why simple if might be complex Here is simple solution in controller script

public function checkloginAction()
{
   // some hosts need to this some not 
   //header ("Content-type: application/json");  // this work
   // prepare json aray ....
   $arr = $array("some" => .....);
   echo json_encode($arr); // this works
   exit;
}

This works in ZF1 and ZF2 as well No need of view scrpt at all

If you use advise of ZF2 creator

use Zend\View\Model\JsonModel;
....


 $result = new JsonModel($arr);
 return $result;

AJAX got null as response at least in zf 2.0.0

Porpoise

I need to render a view script within the Ajax response. – Thoreau

Like this: {"html":"<strong>I'm an HTML response</strong>"}. – Thoreau