JMS Serializer unable to return a response - angularjs

Question

I recently included JMS Serializer bundle to handle and convert arrays into JSON
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
public function searchcarAction(Request $request)
{
$em = $this->getDoctrine()->getManager();
// $car = array();
//$cars = $em->getRepository('VehicleBundle:Car')->findAll();
// foreach ($cars as $cart) {
// $car[] = array('id'=>$cart->getId(),'name' => $cart->getName());
// }
$cars = array('name' => 'john','middlename'=> 'gon');
$serializer = $this->container->get('jms_serializer');
$jsonGroup= $serializer->serialize($cars,'json');
return $jsonGroup;
}
public function carAction()
{
return $this->render('VehicleBundle:Car:car_search.html.twig');
}
car.yml
search_car:
path: /car-search
defaults: { _controller: "VehicleBundle:Car:searchcar" }
car_action:
path: /search
defaults: { _controller: "VehicleBundle:Car:car" }
The JMS Serialiser is registeres in AppKernel.php
This will return 500 error
The controller must return a response ({"name":"john","middlename":"gon"} given).
if (null === $response) {
$msg .=' Did you forget to add a return statement somewhere in your controller?';
}
throw new \LogicException($msg);
}
}
return $this->filterResponse($response, $request, $type);
Whats wrong with my controller?
template
car_search.html.twig
{% extends '::base.html.twig' %}
{% block body %}
<div ng-app="myApp" ng-controller="customersCtrl">
Search your Groups Here: <input type="text" ng-model="searchMe.name"/>
<input type="checkbox" ng-model="exactMatch"/>Exact Match<br/>
<div class="[ form-group ]">
<input type="checkbox" ng-model="click" name="fancy-checkbox-default" id="fancy-checkbox-default" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default" class="[ btn btn-default ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="fancy-checkbox-default" class="[ btn btn-default active ]">
Hide
</label>
</div>
</div>
<table id="table" class="table" ng-hide="click">
<thead>
<tr>
<th>Name</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter:searchMe:exactMatch | limitTo: 2">
<td>//x.name//</td>
<td>//x.model//</td>
</tr>
</tbody>
</table>
</div>
{% endblock %}
{% block javascripts %}
{#{ parent() }#}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('customersCtrl',['$scope','$http',function($scope, $http) {
//$http.get("http://localhost:8093/voters/voters_angular")
$http.get("{{ path('search_car') }}")
.success(function (response) {
$scope.names= JSON.parse(response);
});
}]);
//console.log(names);
</script>
{% endblock %}
Is JMS serializer not working here?

Answer 1

You are returning a string instead of Response object from your controller.
Instead of:
return $jsonGroup;
You should return response, like so for example:
return new \Symfony\Component\HttpFoundation\Response($jsonGroup, 200, ['Content-Type' => 'application/json']);