Mon tableau PHP est transformé en Objet par le JSON

**EverybodyEthan** · 18/02/2021, 11h41

Bonjour,

J'ai un tableau PHP avec des clés en années et des valeurs, telles que : [ “2017” => [2017-12-01]]. Or lors du passage dans la vue, le JSON transforme ce tableau en objet et non en un tableau parce que un JSON c'est une suite d'entrée et pas une suite de clé -> valeur ( si je ne me trompe pas ).

Du coup dans la vue, je récupère un objet et non un tableau qu'il me faudrait...

J'ai vu des topics similaires avec JSON encode mais je ne comprends pas complètement son utilisation et surtout où l'écrire

Je vous met le code de mon tableau PHP, qui en sortie est bien un tableau. ( Vérifié par gettype )

Code php :

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
private function _loadPrevFile($spec = false){ // But : Récupérer l'historique par années
        $file = $spec ? $this->_history_file_spec : $this->_history_file; 
        if( file_exists($file) ){ 
            $buffer = file_get_contents($file); // Récupération données
            if( $buffer !==FALSE ) {
                $history = explode( "\n", $buffer);                          
                    foreach ((array) $history as $line){ // Obligation d'utiliser array pour décrire history comme tableau
                      $tab_date = explode("-", $line);                                         
                      $annee = $tab_date[0];  
                      if (!isset($prevHistory[$annee])){
		                    $prevHistory[$annee] = []; // Tableau multidimensionnel
                                }
                      $prevHistory[$annee][] = $line;                                                                 
                }
            }
            unset($prevHistory[""]); // Supprime l'index qui était vide, cause : dernière ligne history.log
            $spec ? $this->prevHistory_spec = $prevHistory : $this->prevHistory = $prevHistory;
        }
    }

Sinon, on m'a dit d'encapsuler [ “2017” => [2017-12-01]] tel que [[ “2017” => [2017-12-01]] dans un array php, mais je ne sais comment faire.
Si on pouvait m'éclairer sur comment faire svp.

PS : Pour ceux qui auraient suivi mes topics précédents, j'avance petit à petit, merci de votre aide

**mathieu** · 18/02/2021, 23h26

un tableau associatif en PHP à la même structure qu'un objet en javascript, donc cette transformation est normale.

montrez nous comment vous voulez utiliser cette structure en javascript et ce qui vous pose un problème.

**EverybodyEthan** · 19/02/2021, 09h15

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div v-for="(items, key) in sortObject(datas.prevHistory)" class="panel" :class="'panel-'+status">  <!-- second argument index courant -->  
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Historique {{key}} </h3>
        </div>
        <div class="panel-body" id="sensors">
          <div class="row">
            <button data-toggle="collapse" :data-target="'#prevHisto'+key">+</button>
          </div>
          <div class="row collapse" :id="'prevHisto'+key">
            <ul>
              <li v-for="item in items">{{item}}</li> 
            </ul>  
          </div>

Code :

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

1
2
3
4
5
6
7
8
 
 methods: {
    sortObject: function(o) {
      //Object.keys() permet de renvoyer un tableau contenant les noms (clés ou keys)
      //.sort() retourne le tableau en sens inverse           
      //console.log(Object.keys(o).reverse());
  	  return Object.keys(o).reverse().reduce((r, k) => (r[k] = o[k], r), {});
    },

Enfaite ma méthode ne fonctionne pas dessus

**mathieu** · 19/02/2021, 09h40

quel résultat voulez-vous ?
si vous voulez les clés dans l'ordre inverse, vous pouvez essayer cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
let tab = {
	"2017" : ["valeur 1", "valeur 2"],
	"2019" : [],
};
 
 
let cles = Object.keys(tab);
cles.reverse();
 
console.log(cles);

**EverybodyEthan** · 19/02/2021, 09h54

Avec le code que vous avez pu voir plus haut, cela me donne différentes div avec un historique par année. En commencant par 2017 puis 2018 etc..
Cependant je veux cet affichage de facon decroissante avec les valeurs, d'où le reverse.. mais le reduce remet tout dans le sens croissant.
Mon prevHistory est tel que :{ "2017" =>[ "2017-01-01", "2017-02-02"], "2018" etc...
Or, je voudrais [{ 2017 : ["2017-01-01", ... ]}, {2018 : ...}]

Suis-je assez clair ?

PS : Les données sont rangées dans prevHistory['annee']

**mathieu** · 19/02/2021, 12h11

je pense que vous vous êtes emmêlé les pinceaux entre la partie de préparation des données et la partie affichage et donc vous êtes parti sur une mauvaise piste.
pour cet ordre, il vaut mieux trier les données dans la partie préparation en PHP, avec par exemple krsort($prevHistory); quand vous avez fini de construire le tableau.
https://www.php.net/manual/fr/function.krsort.php

**EverybodyEthan** · 19/02/2021, 12h24

Je vais regarder cela alors, merci de la doc.
Mon maitre de stage me dit sur cette partie

Code php :

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
private function _loadPrevFile($spec = false){ // But : Récupérer l'historique par années
        $file = $spec ? $this->_history_file_spec : $this->_history_file; 
        if( file_exists($file) ){ 
            $buffer = file_get_contents($file); // Récupération données
            if( $buffer !==FALSE ) {
                $history = explode( "\n", $buffer);                          
                    foreach ((array) $history as $line){ // Obligation d'utiliser array pour décrire history comme tableau
                      $tab_date = explode("-", $line);                                         
                      $annee = $tab_date[0];  
                      if (!isset($prevHistory[$annee])){
		                    $prevHistory[$annee] = []; // Tableau multidimensionnel
                      }
                      $prevHistory[$annee][] = $line;                                                                 
                }
            }
            unset($prevHistory[""]); // Supprime l'index qui était vide, cause : dernière ligne history.log
            $spec ? $this->prevHistory_spec = $prevHistory : $this->prevHistory = $prevHistory;
        }
    }

de reparcourir le tableau pour qu'on ait quelque chose au final / encapsuler
{
2017 : ["", ""],
2018 : ["", ""]
}

**EverybodyEthan** · 19/02/2021, 14h15

Envoyé par mathieu

je pense que vous vous êtes emmêlé les pinceaux entre la partie de préparation des données et la partie affichage et donc vous êtes parti sur une mauvaise piste.
pour cet ordre, il vaut mieux trier les données dans la partie préparation en PHP, avec par exemple krsort($prevHistory); quand vous avez fini de construire le tableau.
https://www.php.net/manual/fr/function.krsort.php

krsort($prevHistory) ne fonctionne pas même si le var_dump montre "true"

**NoSmoking** · 20/02/2021, 10h46

Bonjour,

je croyais que ton problème était résolu, voir discussion : https://www.developpez.net/forums/d2...tableau-vuejs/, discussion que tu as passée en résolue sans plus d’explication d'ailleurs

**EverybodyEthan** · 22/02/2021, 10h16

Je l'ai mis en résolu car c'est un objet maintenant, je préférais recréer un topic pour être plus clair

**NoSmoking** · 22/02/2021, 15h39

je préférais recréer un topic pour être plus clair

Dans le cas présent cela ne fais qu’embrouiller les choses

car c'est un objet maintenant

exactement comme dans ta précédente discussion, et ma proposition au post #10, je ne vois pas en quoi la solution ne convient pas !

**EverybodyEthan** · 22/02/2021, 16h14

J'ai fini par résoudre le problème ^^
J'ai encapsulé l'objet dans un tableau puis j'ai fait un simple prevHistory.reverse(). Cela fonctionne parfaitement.

J'ai juste une question pour l'affichage, mon tableau est tel quel :

Nom : Image.PNG
Affichages : 123
Taille : 3,1 Ko

Nom : Image.PNG
Affichages : 123
Taille : 3,1 Ko

Comment je fais pour essayer d'affiche mes clés ( années 2017, 2018, 2019... ) en javascript ?

Code :

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

v-for="(items, key) in datas.prevHistory.reverse()"

Cela m'indique les clés 0, 1, 2, etc... ( Clé de l'élément parent si je ne me trompe pas ) Or je voudrais les clés de l'élement enfant

**EverybodyEthan** · 25/02/2021, 02h12

Bonjour,

J'ai un tableau de telle forme "[{[" :

Nom : 1.PNG
Affichages : 123
Taille : 2,2 Ko

Nom : image.png
Affichages : 111
Taille : 3,5 Ko

Et j'aimerais sortir les clés en javascript.. Pas les clés 0, 1, 2 etc... mais bien 2018, 2017 etc...

Comment puis-je faire ?

Merci d'avance

**NoSmoking** · 25/02/2021, 07h24

Envoyé par EverybodyEthan

Comment je fais pour essayer d'affiche mes clés ( années 2017, 2018, 2019... ) en javascript ?

Relis ma réponse comme indiqué, la solution est là

Envoyé par NoSmoking

exactement comme dans ta précédente discussion, et ma proposition au post #10, je ne vois pas en quoi la solution ne convient pas !

Je te recopie l'essentiel :

Code html :

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

1
2
3
4
5
6
<div v-for="(values) in tesDonnées">
  <h3>Historique {{values[0]}}</h3>          <!-- ici tu récupères [["2018"], ["données #1", données #2"]] et ainsi de suite ... -->
  <ul>
    <li v-for="value in values[1]">{{value}}</li>
  </ul>
</div>

Il y a des bases à apprendre quant aux données à manipuler, à chaque v-for de première niveau tu récupères un array à traiter donc comme tel.

**EverybodyEthan** · 25/02/2021, 09h49

J'ai essayé et ca n'affiche strictement rien

Code html :

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
 <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div v-for="(values, key) in datas.prevHistory.reverse()" class="panel" :class="'panel-'+status">  <!-- second argument index courant -->  
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Historique {{values[0]}} </h3>
        </div>
        <div class="panel-body" id="sensors">
          <div class="row">
            <button data-toggle="collapse" :data-target="'#prevHisto'+key">+</button>
          </div>
          <div class="row collapse" :id="'prevHisto'+key">
            <ul>
              <li v-for="value in values[1]">{{value}}}</li> 
            </ul>  
          </div>
          </div>          
          </div>
        </div>
      </div>
    </div>
    </div>

PS : Je dois laisser 'prevHistory'+key sinon chaque bouton me rammène à ma première div

**EverybodyEthan** · 25/02/2021, 16h27

J'ai réussi à afficher les années en faisant

Code html :

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
<div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div v-for="(items, key) in datas.prevHistory.reverse()" class="panel" :class="'panel-'+status">  <!-- second argument index courant -->  
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Historique {{Object.keys(items)}} </h3> <!-- Affichage des années -->
        </div>
        <div class="panel-body" id="sensors">
          <div class="row">
            <button data-toggle="collapse" :data-target="'#prevHisto'+key">+</button>
          </div>
          <div class="row collapse" :id="'prevHisto'+key">
            <ul>
              <li v-for="item in items">{{item}}}</li> 
            </ul>  
          </div>
          </div>          
          </div>
        </div>
      </div>
    </div>
    </div>

**NoSmoking** · 25/02/2021, 16h46

je n'avais pas vu que tu avais encore changé ta structure !!!

• Effectivement avec un array d'objet le cheminement ne peut pas être le même.

• Pourquoi le reverse() ? tu ne le fais pas côté serveur, ce qui me semble préférable.

• Je n'aime pas trop mixer JavaScript dans le template comme tu le fais avec Historique {{Object.keys(items)}}.
Tu peux y arriver sans en faisant par exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  <h2>Une façon de faire</h2>
  <div v-for="(objet) in datas.histoJSON">
    <!-- ici on a un object, par exemple : {"2018": ["Lorem 2018-1", "Lorem 2018-2", "Lorem 2018-3"]} -->
    <!-- ensuite on va traiter l'object -->
    <h3 v-for="(array, key) in objet">Historique {{key}}</h3>
    <!-- ici array n'est plus connu, hors scope du <h3> donc on reprend objet-->
    <!-- maintenant on traite l'array -->
    <ul v-for="(array) in objet">
      <!-- ici on a un array, par exemple : ["Lorem 2018-1", "Lorem 2018-2", "Lorem 2018-3"] -->
      <!-- maintenant on traite l'array -->
      <li v-for="(value) in array">{{value}}</li>
    </ul>
  </div>
</div>

ou encore

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  <h2>Autre façon de faire</h2>
  <div v-for="(objet) in datas.histoJSON">
    <!-- ici on a un object, par exemple : {"2018": ["Lorem 2018-1", "Lorem 2018-2", "Lorem 2018-3"]} -->
    <!-- ensuite on va traiter l'object -->
    <div v-for="(array, key) in objet">
      <!-- ici on a un array, par exemple : ["Lorem 2018-1", "Lorem 2018-2", "Lorem 2018-3"] -->
      <h3>Historique {{key}}</h3>
      <ul>
        <!-- maintenant on traite l'array -->
        <li v-for="(value) in array">{{value}}</li>
      </ul>
    </div>
  </div>
</div>

• N'hésites pas à afficher le résultat dans ton template, cela te permettra de voir facilement les donnés que tu manipules, mais l'essentiel est que tu y sois arrivé.

Bonne continuation