Remove \r\n from Json

The CMS Questions
1

Hellohello,

I am playing around for the first time with Ajax + Kirby. I followed the “Load more” guide as good as I can, but I get the following problem. When I open the Json file URL in the browser, I get this:

http://localhost/test/home/subpage.json
html: "<div>\r\n<h1>ONE</h1>\r\n<p>Subpage One Text</p></div><div>\r\n<h1>TWO</h1>\r\n<p>Subpage two Text</p></div>"

Why are there these \r\n commands and how do I remove them? Unfortunately, in the guide we do not see the Json file so I don’t know if this should be like that or if I am doing something wrong. I think the problem is on my side, because when I load the Json into my <div class="main"> the result is this:

<div class="main">
   {"html":"
      <div>
         \r\n
         <h1>ONE</h1>
         \r\n
         <p>Subpage one text</p>
      </div>
      <div>
         \r\n
         <h1>TWO</h1>
         \r\n
         <p>Subpage two text</p>
      </div>
   "}
</div>

The loaded snippet ist just:

<div>
   <h1><?= $subpage->title() ?></h1>
   <?= $subpage->text()->kirbyText() ?>
</div>

Json controller:

<?php
foreach($site->find('home')->children() as $subpage) {
    $html .= snippet('subpage', ['subpage' => $subpage], true);
}

$json['html'] = $html;
echo json_encode($json);

JS:

const element = document.querySelector('.main');
const button  = document.querySelector('.load-more');

const fetchProjects = async () => {
    let url = 'home/subpage.json';
    try {
        const response      = await fetch(url);
        const html          = await response.json();
        element.innerHTML   = JSON.stringify(html);
        console.log(html);
    } catch (error) {
        console.log('Fetch error: ', error);
    }
}

button.addEventListener('click', fetchProjects);

Thank you!

2

There’s no need to call JSON.stringify here.

3

When I go with:

element.innerHTML = html;

I get:

<div class="main">[object Object]</div>

I did read in the internet that I have to convert this into a string.

4

The reason why that happens is because you don’t deconstructur response.json()

So you have two options:

const html          = await response.json();
element.innerHTML   = html.html;

const { html }      = await response.json();
element.innerHTML   = html;