Value rendered by Controller not getting displayed

Question

So I'm working with Symfony 4.4 and I'm facing an issue here.

I have the following script responsible for getting the value of an input tag and sending it back as json to the controller

 {% if summoner is defined %}
                let res = {{ summoner.summonerLevel }}
            {% endif %}
            $("#valid-summoner").click(function () {
                let data = {'sumoner_name':$("#riot-summoner-input").val()}
                let url = `/coach/`

            let xhr = new XMLHttpRequest

            xhr.open("GET", url)
            xhr.send(JSON.stringify(data))
            console.log(data)
            function loadXMLDoc()
            {
                document.getElementById("display-summonerLevel").innerHTML = `Summoner Level: <h2>${res}</h2>`
            }
            loadXMLDoc();

        });

I have a controller method responsible for rendering the index page that's receiving this json and extracting the content and using it to render the page again but with another option which is that value.

...
$data = json_decode($request->getContent());

        if(isset($data->sumoner_name) && !empty($data->sumoner_name)){

            // We return the code
            return $this->render('coach/index.html.twig', [
                'coaches' => $coaches, 'summoner'=> $this->showSummoner($data->sumoner_name),
                'current_user'=>$currentUser, 'combined'=>$call->fetchCoachRating($coaches)
            ]);
        }else{
            return $this->render('coach/index.html.twig', [
                'coaches' => $coaches,
                'current_user'=>$currentUser, 'combined'=>$call->fetchCoachRating($coaches)
            ]);
        }

I don't know if this is actually the way you're supposed to do it. But it certainly isn't working..

console.log(data) in the script give back the following output

(index):445 {sumoner_name: 'YàKûZa'}sumoner_name: "YàKûZa"[[Prototype]]: Object

I'm not sure what I can do here