Fetching php in javascript

Kirby 3 Questions 🤔
1

I’m building a page with a set of links.

I would like to fetch a different set of images from each link.
For example, when you hover project one it displays the images stored in that project one.
Its a quite simple thing to achieve, but I would like to avoid overloading all the images if that’s possible.

So I started making a script to add to my page the content from the project I hovered.

let menus = document.getElementsByClassName("nav-project");
Array.from(menus).forEach(function(menu) {
menu.addEventListener("mouseenter", function(event) {
  console.log(event.target.id) // get the id to use it later to fetch the corresponding project
  var main = document.getElementsByTagName('main')
  const data = "<?= $data ?>";

  });
});

But now I’m kind of lost. I would like to fetch my content and do something like that <?= $site->children(event.target.it)
Probably, it’s going to not work since php is passed by the server and js after the page is loaded. So maybe there is a better way to do it? (without using :hover)

EDIT :
I did things differently for now :
I’m loading all the images on my webpages of every project.
With the mouse hover I’m then giving a class to hide or show at the top the corresponding images you hovered.

2

What you need to do here is fetch the images using an Ajax call. The Ajax call can go to a content representation or a route which return the requested information.

3

thanks texnixe for the help,
I’ll dig into that but it seems pretty obscure right now.

4

I made a few steps forward - and I’m still not getting something.
I made my json file for every project :

<?php

$data = $page->siblings(false);
$images = $data->images()->sortBy('sort');
$json = [];

foreach($data as $article) {

  $json[] = [
    'url'   => (string)$article->url(),
    'title' => (string)$article->title(),
    'text'  => (string)$article->text(),
  ];

  foreach($images as $image) {

    $json[] = [
      'images'  => (string)$image->url()
    ];
  
  }
}

echo json_encode($json);

?>

and I would like to fetch it using javascript :

    function fetchProjects (project) {
        console.log(project.target.id)
    fetch('' + project.target.id + '.json')
    .then((response) => response.json())
    .then((data) => console.log(data));
}

Array.from(menus).forEach(function(menu) {
    menu.addEventListener("mouseenter", fetchProjects)

    });

now the issue is that I would like to get the images from my json but data.title is not working, nor data.images