Remove \r\n from Json


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:

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">
         <p>Subpage one text</p>
         <p>Subpage two text</p>

The loaded snippet ist just:

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

Json controller:

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

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


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);
    } catch (error) {
        console.log('Fetch error: ', error);

button.addEventListener('click', fetchProjects);

Thank you!

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

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.

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;
1 Like