Не срабатывает ajax запрос для получения ответа от сервера

Имею фреймворк, где есть файл Main.php, в котором есть экшн, который будет давать ответ от сервера

        public function test() 
          {  
           $data=["answer"=>"Ответ от сервера","code"=>200];
            echo $data=json_encode($data);
            die(); 
            }```

        также в фреймворке есть файл index.php в котором ajax запрсос к этому экшену
                      <div class="container">
                      <div id="answer"></div>
               <button class="btn btn-default" id="send">кнопка</button>
                  <script>
                 $(function(){
                 $('#send').click(function(){
       
                  $.ajax({
                   url: 'main/test',
                    type:'post',
                    data:{'id':2},
    
                   success:function(res){
                    // console.log(res);  
                   var data =JSON.parse(res);
                    $('#answer').html('<p>Ответ: '+data.answer+' | код: '+data.code+'</p>');
         },
         error:function(){
             alert('ERROR!');
         }
       })
     })   
   }); 
    </script>

при нажатии на button запрсос не срабатывает, пишет ошибку

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

указывая на 159 строку var data =JSON.parse(res);

пробовал выводить через консоль, тогда всё получается, или же напрямую ввожу значения введите сюда коднаприм var data =JSON.parse( '{ "name":"John", "birth":"1986-12-14"}'); тоже всё работает, в чём может быть проблема?