PHP - Récupérer des données en JSON et les appeler avec JS

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Je récupère depuis ma bdd des données (via un SELECT depuis mon manager), que je manipule dans ma Vue. Je crée une boucle while en faisant un fetchAll pour afficher toute les données (jusqu'ici tout va bien) en indiquant que je souhaite retourner du JSON :

Index:
Code:

1 2 3 4 //JSON elseif($_GET['action'] == "json_data") { marker(); }
Controller :
Code:

1 2 3 4 5 6 7 function marker() { //Afficher les markers $locationManager = new LocationManager(); $listMarker = $locationManager->addMarker(); header("Content-type:application/json"); require('View/frontend/locationView.php'); }
La vue :
Code:

1 2 3 4 5 6 7 8 9 10 <?php while ($data = $listMarker->fetchAll()) { [{ "name": $data->location_name, "position": { "latitude": $data->latitude, "longitude": $data->longitude } }] }
Ce que je veux c'est qu'ensuite en javascript je récupère les données de cette boucle et notamment la "position" pour pouvoir afficher les marqueurs sur ma map.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function initMarkers() { var map = L.map('map').setView([34.886306,134.379711], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', }).addTo(map); this.ajaxGet('http://localhost/Tokyo/TokyoAPI/index.php?action=json_data', (reponse) => { let datas = JSON.parse(reponse); for (const data of datas) { L.marker(Object.values(data.position), { "data": data }) .addTo(map) .bindPopup(data.image) .openPopup(); } }); } initMarkers();
Mais j'ai ce message d'erreur suivant en entrant sur la page d'accueil de mon site (là ou contient ma map) :

Pièce jointe 589423

par aillleurs l'URL http://localhost/Tokyo/TokyoAPI/inde...tion=json_data me renvoie du code HTML alors qu'il devrait renvoyer du JSON avec le header que j'ai inséré dans le controller.

Pièce jointe 589429
(les symboles "{" et "[" et ":" ne sont pas comprise)

Merci pour votre aide.

27/01/2021, 09h11
cavo789

Bonjour

Ta dernière image est la plus pertinente : il est fait mention d'une erreur de syntaxe dans un fichier php en ligne 3. Analyse et corrige cette erreur en tout premier lieu.

Comme tu l'as mentionné, ton appel doit retourner du code JSON et pas autre chose; tant que tu reçois autre chose; il y a lieu de fixer cela et de t'assurer que la partie PHP est fonctionnelle.

Bonne journée.

Merci pour ta réponse mais justement, en temps normal, lorsque je fais des boucles de type while ou foreach(), je combine avec du html. ex:
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php foreach ($listposts as $data) : ?> <h3><?= htmlspecialchars_decode($data->title); ?> <span class="date"> le <?= $data->creation_date_fr; ?> </span></h3> <p class="content"> <?= htmlspecialchars_decode(substr($data->content,0,500)) .'...'; ?></p> <p><a class="chapter" href="index.php?action=post&id=<?= $data->id ?>">Lire la suite</a></p> <br /> <?php endforeach ?>
Sauf qu'içi c'est du JSON, et d'après mes recherches pour indiquer au navigateur que l'on souhaite récupérer du JSON il faut lui indiquer une en-tête :

Code:

header("Content-type:application/json");

Ce que j'ai fait, mais ça ne marche pas. Ca décrypte toujours du HTML.

A la base, mon fichier JSON ressemble à ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
[{
    "name": "Ueno",
    "position": {      
        "latitude": 35.7117896,
        "longitude": 139.7775976,
    }
 
},
{
    "name": "Shinjuku",
    "position": { 
        "latitude": 35.6937632,
        "longitude": 139.7036319
    }
 
},
 
 
etc...

27/01/2021, 10h18
cavo789
Regarde ta ligne 3; celle qui est mentionnée dans le message d'erreur...
Code:

1 2 3 <?php foreach ($listposts as $data) : ?>
Tu es certain qu'il faut mettre : et pas { ?
Code:

1 2 3 <?php foreach ($listposts as $data) { ?>
Il faut que cette page retourne du code JSON avant même de commencer l'exploiter en JS.

Ah, désolé mais ce code était juste un exemple, c'est celui ci :
Code:

1 2 3 4 5 6 7 8 9 10 <?php while ($data = $listMarker->fetchAll()) { [{ "name"':' $data->location_name, "position": { "latitude": $data->latitude, "longitude": $data->longitude } }] }
Donc içi les symboles JSON pose problème car mon navigateur ne lis pas le JSON.

Pour info j'ai très bien compris le message d'erreur, mais je ne comprend pas pourquoi il y a cette erreur alors que dans mon controleur je précise le type de ressource que je veux envoyer au navigateur (JSON).

27/01/2021, 10h39
cavo789
Note: lorsque tu souhaites de l'aide, s'il te plaît, poste le code réel. C'est une perte de temps sinon ;)

Une fois encore, regarde ton code : tu es certain qu'il est exécutable ? En ligne 3 tu fais quoi ? Tu as écris [{ : ce n'est pas une instruction PHP ça. Ton script PHP est donc invalide.

Essaie plutôt quelque chose comme:
Code:

1 2 3 4 $arr['name']=$data->location_name; $arr['position']['latitude']=$data->latitude; $arr['position']['longitude']=$data->longitude; echo json_encode($arr);
Note: non testé, c'est pour te donner une piste.

Tu crées un tableau avec tes entrées (name, position, ...) et tu utilises json_encode pour récupérer un JSON propre.
27/01/2021, 10h47
Lunesti

Désolé de t'avoir induis en erreur le vrai code était dans mon premier post ^^

Je vais étudier ta proposition merci

2 pièce(s) jointe(s)

Merci, je parviens maintenant à récupérer du json .

Pièce jointe 589450

J'ai modifié mon manager en spécifiant le fetchAll içi

Code:

1
2
3
4
5
6
7
8
public function addMarker() {
    $connexion = new Manager();
    $db = $connexion->dbConnect();
    $req = $db->query('SELECT id, location_name, latitude, longitude, DATE_FORMAT(creation_date, \'%d/%m/%Y à %Hh%imin%ss\') AS creation_date_fr FROM place');
    $req->setFetchMode(\PDO::FETCH_CLASS, Location::class);
    $location = $req->fetchAll();
    return $location;
}

Puis j'ai fait un foreach dans la vue

Code:

1
2
3
4
5
6
7
8
9
 
<?php
foreach($listMarker as $data) :
    $arr['name']=$data->location_name;
    $arr['position']['latitude']=$data->latitude;
    $arr['position']['longitude']=$data->longitude;
    echo json_encode($arr);
 
endforeach;

Mais le problème final n'est toujours pas réglé, mes marqueurs ne s'affichent pas sur ma map. J'ai ce message d'erreur (qui a quelque peu changé)

Pièce jointe 589451

Je remet içi mon JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function initMarkers() {
 
    var map = L.map('map').setView([34.886306,134.379711], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 
    }).addTo(map);
 
    this.ajaxGet('http://localhost/Tokyo/TokyoAPI/index.php?action=json_data', (reponse) => {
        let datas = JSON.parse(reponse);
        console.log(datas);
        for (const data of datas) {
            L.marker(Object.values(data.position), {
                    "data": data
                })
                .addTo(map)
                .bindPopup(data.image)
                .openPopup();
        }
    });
}
initMarkers();

La ligne 42 correspond à cette ligne :

Code:

let datas = JSON.parse(reponse);

27/01/2021, 11h40
cavo789

Sur base de ta capture d'écran JSON, il me semble que ton JSON n'est pas valide. Tu as des { .. } { .. } { .. } et ce n'est pas valide.

Tu devrais avoir [ { .. }, { .. }, { .. } ] càd définir un array et mettre des virgules entre chaque { .. }.
29/01/2021, 08h34
Lunesti

Sujet résolu, il fallait simplement encode les données comme ceci :

Code:

echo json_encode($listMarker);

sans nécessairement faire une boucle.

merci à cavo789 pour son soutien !
29/01/2021, 09h34
cavo789

Top !

Zut, d'emblée j'ai pensé que la structure de $listmarkers était différente que tu ce que tu voulais en sortie et je n'ai donc pas pensé à te suggérer d'utiliser le tableau dès le départ.