Mon tableau PHP est transformé en Objet par le JSON

Version imprimable

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:

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

18/02/2021, 23h26
mathieu

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.

Code:

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:

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

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

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

19/02/2021, 09h54
EverybodyEthan

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']
19/02/2021, 12h11
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

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

Code:

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 : ["", ""]
}

19/02/2021, 14h15
EverybodyEthan

Citation:

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"
20/02/2021, 10h46
NoSmoking

Bonjour,
:koi:
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 :calim2:
22/02/2021, 10h16
EverybodyEthan

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
22/02/2021, 15h39
NoSmoking

Citation:

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

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

Citation:

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 !
22/02/2021, 16h14
EverybodyEthan

1 pièce(s) jointe(s)

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 :

Pièce jointe 591655

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

Code:

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
25/02/2021, 02h12
EverybodyEthan

2 pièce(s) jointe(s)

Sortir des clés d'un tableau multimensionnel / objet

Bonjour,

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

Pièce jointe 591860

Pièce jointe 591861

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

Citation:

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à
Citation:

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:

1 2 3 4 5 6 <div v-for="(values) in tesDonnées"> <h3>Historique {{values[0]}}</h3>  <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.

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

Code:

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

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

Code:

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>

:oops: 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:

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:

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

26/02/2021, 09h52
EverybodyEthan

Merci cela fonctionne :)

J'avais bien deviné qu'il fallait faire plusieurs v-for mais je ne trouvais pas comment :)

On y est finalement parvenu que ce soit par ton code, ou par mon Object.keys()
Merci encore :)
A bientot