Inverser un tableau en vueJS

Bonjour,

Suite à mes précédents posts, j'ai réussi à avancer en créant plusieurs div proposant les dates par années. Actuellement les dates sont par années en ordre croissant, or je les voudrais dans l'autre sens ( ordre décroissant ). J'ai déja essayé des propositions de filters / components que j'ai pu trouver sur le net en adaptant mais rien n'est concluant. Je sais que reverse existe mais je n'arrive pas à l'utiliser correctement.. bref en tant que débutant je galère.

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="(item, index) in 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 {{index}}</h3> </div> <div class="panel-body" id="sensors"> <div class="row"> <button data-toggle="collapse" :data-target="'#prevHisto'+index">+</button> </div> <div class="row collapse" :id="'prevHisto'+index"> <ul> <li v-for="items in item">{{items}}</li> </ul> </div> </div> </div> </div> </div> </div> </div>

---

Merci amis developpeurs

Bonjour,
une petite remarque, au lieu d'écrire

Code:

---

<li v-for="items in item">{{items}}</li>

---

il est plus judicieux d'écrire

Code:

---

<li v-for="item in items">{{item}}</li>

---

c'est plus logique !

Pour afficher dans l'ordre inverse, sans passer par un filtre, tu peux écrire :

Code:

---

<li v-for="item in items.slice().reverse()">{{item}}</li>

---

...cela devrait faire le job.

Merci pour ta réponse.
Je n'ai pas du etre assez clair dans mon problème.

Pièce jointe 590732

Pour l'instant je ne veux pas que l'interieur change mais que par exemple historique 2018 viennes à la place de 2017, pour avoir un affichage de menu déroulant tel que : Historique 2020
Historique 2019
Historique 2018
Etc...

Ce n'est juste qu'un exemple que je t'ai fourni, si tu utilises un tableau au niveau supérieur tu peux faire la même chose.

En regardant ton code, et notamment :

Code:

---

<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Historique {{index}}</h3>

---

le {{index}} me laisse perplexe, quel est le format des tes données, peux tu nous en mettre un petit extrait ?

Enfaite c'est un tableau "prevHistory" avec comme clés des années suivant un fichier de logs côté serveur

Donc

prevHistory : [2017] : [2017-01-01 10:50:00 ... , etc... ]
: [2018] : [2018-10-10 10:11:12 ... , etc... ]
etc..

Donc lorsque je demande {{index}} cela affiche "Historique année "n"" puis les valeurs de cette année dans le menu deroulant.

Mon maître de stage m'a dit de m'inspirer de cela
https://www.nicesnippets.com/blog/vu...by-key-example

Citation:

---

prevHistory : [2017] : [2017-01-01 10:50:00 ... , etc... ]
: [2018] : [2018-10-10 10:11:12 ... , etc... ]
etc..

---

pour moi cette syntaxe n'est pas correcte donc ... !?!

Est-ce un Array, dans ce cas un reverse() devrait fonctionner, est-ce un Object, dans ce cas le lien fourni par ton maître de stage est applicable.

Le .reverse() ne fonctionne pas, je l'ai déjà essayé auparavant. Je dois donc me pencher sur la fonction en la modifiant ( je ne sais quoi modifier )

je te montre une partie de ma fonction pour le tableau que je t'expliquais ( multidimensionnel si je ne me trompe pas )

Code:

---

1 2 3 4 5 6 7 8 9

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

---

Merci de ton aide :)

• Tout d'abord, lorsque l'on tarvail sur un objet il est préférable d'écrire

Code:

---

1 2 3 4

<!-- avec key --> <div v-for="(values, key) in jsonDatas"> <h3>Historique {{key}}</h3> </div>

---

Code:

---

1 2 3 4

<!-- avec name --> <div v-for="(values, name) in jsonDatas"> <h3>Historique {{name}}</h3> </div>

---

plutôt que d'utiliser index qui peut prêter à confusion juste à la lecture.

Ceci étant un autre remarque, Attention des clés type numérique posent problème, pour un traitement !

Citation:

---

Envoyé par ECMAScript® Language Specification

When the abstract operation OrdinaryOwnPropertyKeys is called with Object O, the following steps are taken:

1. Let keys be a new empty List.
2. For each own property key P of O such that P is an array index, in ascending numeric index order, do
   Add P as the last element of keys.
3. For each own property key P of O such that Type(P) is String and P is not an array index, in ascending chronological order of property creation, do
   Add P as the last element of keys.
4. For each own property key P of O such that Type(P) is Symbol, in ascending chronological order of property creation, do
   Add P as the last element of keys.
5. Return keys.

---

• Tu pourrais t'en sortir en utilisant une propriété calculée, comptuted, comme suit :

Code:

---

1 2 3 4 5 6 7 8 9

data: { // ici les données jsonDatas },   computed: { getInverseJson: function() { return Object.entries(this.jsonDatas).sort().reverse(); // ou passer une fonction a sort }, },

---

et en faisant ton appel comme suit :

Code:

---

1 2 3 4 5 6

<div v-for="(values) in getInverseJson"> <h3>Historique {{values[0]}}</h3> <ul> <li v-for="value in values[1]">{{value}}</li> </ul> </div>

---

• Une autre solution serait d'éviter les clés numériques, un simple espace avant ou arrière serait suffisant.

• Enfin la solution des CSSiste serait d'utiliser un conteneur en display: flex :

Code:

---

1 2 3 4

#conteneur { display: flex; flex-direction: column-reverse; }

---

}

Merci de ta réponse complète !

Je viens d'essayer la première solution avec computed qui ne fonctionne malheureusement pas avec une erreur console, qui selon moi est logique puisque tu dis de mettre les données de JSONdatas dans le data.
Or je ne vois pas quoi mettre dans le datas sachant que les valeurs contenues dans prevHistory sont enregistrées côté serveur et que mon maître de stage m'a dis de ne pas y toucher.

Citation:

---

Une autre solution serait d'éviter les clés numériques, un simple espace avant ou arrière serait suffisant.

---

Je n'ai pas compris ce que tu as voulu dire ici :?


Merci d'avance l'ami

Citation:

---

Je viens d'essayer la première solution avec computed qui ne fonctionne malheureusement pas avec une erreur console,

---

Il aurait été bon que tu nus dises laquelle !

Citation:

---

qui selon moi est logique puisque tu dis de mettre les données de JSONdatas dans le data.

---

Je t'ai donnais le principe, le nommage des variables n'étant que pur exemple.

Citation:

---

Or je ne vois pas quoi mettre dans le datas sachant que les valeurs contenues dans prevHistory sont enregistrées côté serveur

---

Ou, quand et comment sont initialisées tes données, on n'a pas le code pour t'aider !

Déclaration, exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

app = new Vue({ el: "#app",   data: { datas: { histo: { /* les données brutes ou récupèrées */ } }, },   computed: { getInverseJson: function() { return Object.entries(this.datas.histo).sort().reverse(); }, }, });

---

et le template :

Code:

---

1 2 3 4 5 6 7 8 9

<div> <h2>getInverseJson</h2> <div v-for="(values) in getInverseJson"> <h3>Historique {{values[0]}}</h3> <ul> <li v-for="value in values[1]">{{value}}</li> </ul> </div> </div>

---

Citation:

---

Je n'ai pas compris ce que tu as voulu dire ici :?

---

Une clé "2018" sera vu comme un « array index », une clé " 0218" ou "2018 " comme une « String ».