Using unquoted json formatted result set in symfony2 twig

In the request->process->response world of the MVC infrastructure, Symfony2 fits just perfect.

I was working on some data intensive site. All I want was to get the set of records from the mysql database and pass it to the front end through the controller. The front end wants the JSON format of the result set. The front end is getting the polished output of the twig

The problem
Front-end is not happy since it is getting quote-escaped version of JSON

The solution

Very very very simple. Rather than passing the json_encode(all_cars), where all_cars being the array of results coming from database or whatever it is, just pass the array it self

{{ all_cars | json_encode | raw }}

Yup, twig will not try to escape the quotes in this case since it is told to present raw.

Additional View

As you can see in this menu, both JSON and html views are together as combo. From design point of view this is not a good approach.

Better approach

You can bake the whole view right in the view and you might not want additional javascript logic on your view

Have specific API to return 100% JSON response for the request like

some domain dot com/all/cars

By hitting this from, say your ajax call, you will be provided with json formatted list of all cars.

Since you are calling it from javascript, it will be directly coming to its home and no funny business would be there.
Then you will have another url call to load the page say:

some domain dot com/cars

where it will simply load the bare html format to the front-end and the front-end will know what to do with it.

Of course, this would have two trips and even more so it would be suitable for 80-90% of ajaxy sites..


jQuery – Simple & Powerful

jQuery seems the new player as far the client side manipulation is the issue. I had always thanked JavaScript for allowing us to do the dirty job on the client side starting from validation to amazing animations and magics – as it was seen on the Google earth, we should due credit.
Then comes Ajax, yup I have loved and played with it and it is so logical. Why do I have to submit the whole page while the intension is to submit only, say, a single value like an email for subscription. Of course it has done even more than that.
And now, jQuery which is a bundle of the two nice tools. JQuery is collection of JavaScript libraries that would make coding easy, fast navigation experience and almost a shortcut to Ajax.
The functions in the jQuery are human friendly and easy to remember.
It is possible to access an element only, or a group of elements or elements under the same class in easier way. Above all uses nicely callback functions – cooool.
All one has to do to start jQuery is to download the library from and locate it like any other JavaScript code:
Following this, be ready to plough. The main character in play would be the jquery object itself. Accessing it could be done either by directly calling it or using its alias($) – which is the custom to go. How it does is: first it would select single or group of elements and then apply tasks like editing, hide/show, replacing, assigning new style and many more. Let us use the following simpe XHTML code for illustration

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
<title> Sample jQuery </title>
<script src="JQuery/jquery-1.3.2.min.js" type="text/javascript" ></script>
<style type="text/css">
background-color: palegreen;
font-family: verdana;
color: black;
font-size: 12px;
width: 300px;
text-weight: bold;
border: solid 1px blue;
width: 300px;


<p id="description" class="highlight">This is for the illustration purpose</p>
<p id="attention" class="emphasis">give attention for this</P>
<a href="">More examples</a>
<input type="button" id="toggler" value="toggle" />

Basic jQuery statement would have the following format:

<script type="text/javascript">
       $(document).ready( function(){
               logic goes here;

Here the ‘$’ is an alias for the jQuery object, document is the representation of documents as in DOM. The ready method makes sure if the page is ok to proceed or not.
function() inside the ready() method is the callback function. The beauty begins here, we can define any function of our own as we like.
Lets remove the highlight style from description and assign it emphais
The first part “p#description” would select the paragraph with id description. Had it been “p”, it would select all paragraphs.
In this particular case it is also possible to say (“#description”).
removeClass and addClass are self-explanatory.
The chaining is possible as a dot operated methods because each selection would return an object.
Remember how to toggle in JavaScript? Had to use if .. how about in jQuery.
Lets make a click on the first paragraph to hide and show the second paragraph.

        $("#description").click( function(event){

That is all. A single line would keep our fingers from being tired.

Here, the click method would accept the callback function. This call back function is specific to the call only. Say if I have used (“p”), then when I click on a particular <p>, the click method would be applicable only to the clicked paragraph element.


The above snippet shows only one paragraph at a time. But it shows them alternatively.

This is just to give a very highlight about jQuery. There are a lot of things especially on the selection area.

The following are are good sources of jQuery tutorial and references