How to print comments for every topic?

Question

I have 2 tables topics and comments: In the comments table a have column named topic_id where the id is the number, which corresponds to the commented topic from the user. I list the topic details with the following function in the TopicController:

 /**
     * @Route("/topic/{id}", name="topic_details")
     * @param $id
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function topicDetailsAction($id)
    {
        $topic = $this->getDoctrine()->getRepository('AppBundle:Topic')->find($id);

        return $this->render('topics/topic.details.html.twig', array(
            'topic' => $topic
        ));
    }

Now im trying to display the comments for the current selected topic with this function in the CommentController:

     /**
     * @Route("/topic/{id}", name="topic_details")
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function listCommentsAction($id)
    {
        $topic = $this->getDoctrine()->getRepository('AppBundle:Topic')->find($id);
        $topicComments = $topic->getComments();

        return $this->render('topics/topic.details.html.twig', array(
            'topicComments' => $topicComments
        ));

    }

After all, when i try to print all the data from specific topic in the twig, i got the following exception:

Variable "topicComments" does not exist. Im sure the problem isn't big and can be solved, but not sure what i'm missing. Here's my twig template:

{% extends 'base.html.twig' %}

{% block body %}
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"><a href="/topic/{{ topic.id }}">{{ topic.title }}</a></h3>
            </div>
            <br>
            <div class="container">
                <h3>Description:</h3>
           <div class="well">
               <div class="panel-body">
                        {{ topic.description }}
                   </div>
               </div>
           </div>
            <hr>
            <div class="panel-body">
                <div class="well">
                    <b>
                        Category: {{ topic.category }} <br>
                        Created: {{ topic.dateCreated|date("m/d/Y  H:i:s") }}
                    </b>
                </div>
            </div>
        </div>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-body">

            </div>
        </div>
    </div>
        <a href="/{{ topic.id }}/comment/add" class="btn btn-lg btn-default">Leave a Comment</a>
    </div>
    <div class="container">
        {% for comment in topicComments %}
            {{ comment.description }}
        {% endfor %}
    </div>
{% endblock %}

Answer 1

You could continue passing the topic variable instance and navigate the relation in the twig, so render the controller:

    return $this->render('topics/topic.details.html.twig', array(
        'topic' => $topic
    ));

Then in the template:

   {% for comment in topic.comments %}
        {{ comment.description }}
    {% endfor %}

Answer 2

You are using the same template in both actions, but only in one of them you provide the variable topicComments

Some solutions are,

1. Provide empty array in the controller:

   return $this->render('topics/topic.details.html.twig', array(
       'topic' => $topic
       'topicComments' => [],
   ));
   

2. Test if the var is defined

   {% if topicComments is defined and not topicComments  is empty %}
   <div class="container">
       {% for comment in topicComments %}
           {{ comment.description }}
       {% endfor %}
   </div>
   {% endif %}
   

3. Make use of the filter default

   {% for comment in topicComments|default([]) %}
       {{ comment.description }}
   {% endfor %}