Bonjour, je cherche à afficher des points sur une carte depuis une base de données. J'utilise pour cela leaflet avec OSM.

Je récupère les données de ma BD grâce à PHP. 

    $req=$pdo->prepare("SELECT * FROM entites");
    $req->execute();
    $req->setFetchMode(PDO::FETCH_ASSOC);
	$treq=$req->fetchAll();
    $json=json_encode($treq, JSON_UNESCAPED_UNICODE);

Et avec ceci je récupère les données en JS, et affiche mes marqueurs.

// Placement des marqueurs
let data= '<?PHP echo $json;?>';
console.log(data);
data.filter(entite => entite.longitude != null && entite.latitude != null)
    .forEach(entite => {
          L.marker([entite.latitude, entite.longitude]).addTo(map).bindPopup(entite.nom).openPopup();
});

Sauf que ça ne marche pas (je ne serai pas ici autrement ).
Je suis censé avoir mes données sous ce format pour que ça fonctionne :

Sauf que quand je les récupère elles sont sous ce format :


Si quelqu'un a une idée je suis preneur, merci d'avance !

-
Edité par Kévin_ 14 octobre 2021 à 13:52:24

Bonjour, lorsque tu as demandé à PHP d'injecté les données à Javascript de cette façon:

let data= '<?PHP echo $json;?>';

Il à placé le contenue du JSON dans une chaîne de texte c'est pour cela que ton console.log t'affiche le JSON en "non-formaté" c'est par ce qu'il et dans une chaîne de texte, tu peut le vérifié en affichant le type de la donnée via:

console.log(typeof data);

Je pense que tu n'as pas besoin des guillemets lors de l'injection des données à javascript le contenue et déjà un objet Javascript valide (un tableau) tu dois pouvoir l'écrire de cette façon:

let data = <?PHP echo $json;?>;
console.log(data);
console.log(typeof data); // devrait être "object"

-
Edité par SamuelGaborieau3 14 octobre 2021 à 3:47:39

Niquel, en effet sans les '' ça règle le problème, merci beaucoup !
Et supposons que je veuille transférer cette variable $json dans un fichier JS externe, je pourrai procéder comment ?

Bonjour, je pense que PHP devrait créé un fichier JSON enregistré la variable $json dedans et exposé le fichier au client, le navigateur téléchargerait le fichier que PHP aurait créé:

<?php

define('FILENAME_JSON', __DIR__ . "\\<PATH>\\data.json");

file_put_contents(
    FILENAME_JSON, // chemin du fichier
    json_encode($json), // les données du fichier (au format texte si il ne les pas déjà)
);

?>

PHP créé un fichier data.json via file_put_contents et injecte le contenu JSON à l'intérieur.

<script>

fetch('http://localhost:<PORT>/<PATH>/data.json', {
	method: "GET"
})
.then(function(response) {
	return response.json();
})
.then(function(data) {
	console.log(data);
})
.catch(function(error) {
    console.error("cant fetch data with: ", error);
});

</script>

Javascript envoie une requête réseaux via l'api fetch, pour tenté d'obtenir le fichier JSON que PHP à créé.