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

**Lunesti** · 27/01/2021, 08h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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: '&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);
        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) :

Nom : error js.png
Affichages : 130
Taille : 3,1 Ko

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.

Nom : html json.png
Affichages : 128
Taille : 8,3 Ko

Nom : html json.png
Affichages : 128
Taille : 8,3 Ko

(les symboles "{" et "[" et ":" ne sont pas comprise)

Merci pour votre aide.

**cavo789** · 27/01/2021, 09h11

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.

**Lunesti** · 27/01/2021, 09h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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&amp;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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**Lunesti** · 27/01/2021, 10h04

A la base, mon fichier JSON ressemble à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**cavo789** · 27/01/2021, 10h18

Regarde ta ligne 3; celle qui est mentionnée dans le message d'erreur...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php foreach
   ($listposts as $data) : 
?>

Tu es certain qu'il faut mettre : et pas { ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Lunesti** · 27/01/2021, 10h22

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

**cavo789** · 27/01/2021, 10h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Lunesti** · 27/01/2021, 10h47

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

Je vais étudier ta proposition merci

**Lunesti** · 27/01/2021, 11h23

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

Nom : JSON.png
Affichages : 110
Taille : 18,5 Ko

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é)

Nom : JSON78.png
Affichages : 109
Taille : 3,5 Ko

Nom : JSON78.png
Affichages : 109
Taille : 3,5 Ko

Je remet içi mon JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 let datas = JSON.parse(reponse);

**cavo789** · 27/01/2021, 11h40

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 { .. }.

**Lunesti** · 29/01/2021, 08h34

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo json_encode($listMarker);

sans nécessairement faire une boucle.

merci à cavo789 pour son soutien !

**cavo789** · 29/01/2021, 09h34

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.

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

PHP & Base de données

Discussions similaires

Partager

Partager