Listener sur un tableau Javascript

Version imprimable

07/08/2017, 11h35
devhercule

Listener sur un tableau Javascript

Bonjour,

je suis novice en Javascript et je m'interroge sur la faisabilité d'un truc.

En fait, j'ai un tableau "Tab1" qui est géré par une API (rempli automatiquement), je voudrais créer un nouveau tableau "tab2", que je gère moi même, qui écoute (via un listener) le tableau "Tab1" et effectué des taches selon les modifs apportées sur "Tab1".

Exemple, ajouter une ligne dans "Tab2" quand une ligne est ajoutée dans "Tab1". NB: le tableau est un tableau de chaîne de caractère.

Peut on faire ça en Javascript?

Merci par avance
07/08/2017, 16h09
NoSmoking

Bonjour,

Citation:

Peut on faire ça en Javascript?

si tu gères toi même les fonctions de modification de ton tableau de données "Tab1", il te suffit d'ajouter en fin de fonction l'appel à une fonction de mise à jour de ton tableau de données "Tab2".

La réponse est donc OUI !
07/08/2017, 16h13
ma5t3r

Citation:

En fait, j'ai un tableau "Tab1" qui est géré par une API ...

Quelle est cette API ?
Si tu as le source, il suffit d'ajouter un callback ou l'appel à une fonction lorsqu'une information est ajoutée au Tab1.
Probablement pas facile de reprendre la philosophie du dev de l'API mais faisable.
Normalement, les callback existent dans l'API si celle-ci est bien faite.
07/08/2017, 17h20
Loralina

Bonjour,
D'une manière générale, ce qui peut correspondre à l'idée de "listener", c'est Proxy (justement conseillé à cette page sur Array.observe, méthode qui elle est déconseillée).
L'inconvénient est de ne pas être compatible avec Internet Explorer.

Un exemple avec Proxy ici :
https://stackoverflow.com/questions/...-array-changes

J'ai testé l'exemple et apparemment :
La variable proxy (var proxy = new Proxy...) correspondrait à votre tableau Tab1.
Quand je regarde console.log(proxy.__proto__===Array.prototype), ça me met true.
__proto__ semble prendre la valeur du __proto__ de la cible, mais je n'ai pas regardé plus en détail le fonctionnement exact.

Pour gérer les listner avec JS sur les tableaux il y'a deux méthodes : l'attribut onclick et le addEventListener

Pour le onclick

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<table>
<thead>
</thead>
<tbody>
<tr onclick="numero(this.rowIndex)"><!-- Cela veut dire, au click de la ligne ecoute la fonction numero dont le parametre me 
donnera moi le numero de la ligne-->
<td>cbcvvbvcb</td>
<td>cbvbcvbv</td>
<td>cbcvbcvbvcb</td>
<td><bcvbvcb/td>
</tr>
<tr onclick="numero(this.rowIndex)">
<td>bvcbvcb</td>
<td>cbvcb</td>
<td>bcvcb</td>
<td>cbcvbc</td>
</tr>
<tr onclick="numero(this.rowIndex)">
<td>bccvb</td>
<td>bccvb</td>
<td>bcvbvcb</td>
<td>cbvcbcvb</td>
</tr>
</tbody>
</table>
 
<script>
// Pour récuperer le numero de la ligne
// On déclare une variable dont le but sera de stocker le numero de la ligne
var monNumero
 
// la fonction numero(num) permet de récuperer l'index de la ligne dans la variable num
function numero(num){
// On affecte le numero de ligne à monNumero
monNumero = num    
 
}
 
//Permet de voir dans ta console que monNumero prend à chaque fois la valeur de la ligne cliqué
document.addEventListener("click", function(){
    console.log(monNumero)
})
 
</script>

Pour le addEventListener
Dans ce cas la il faut donner un id à ton tableau

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<table id="monTableau">
<thead>
</thead>
<tbody>
<tr>
<td>cbcvvbvcb</td>
<td>cbvbcvbv</td>
<td>cbcvbcvbvcb</td>
<td><bcvbvcb/td>
</tr>
<tr>
<td>bvcbvcb</td>
<td>cbvcb</td>
<td>bcvcb</td>
<td>cbcvbc</td>
</tr>
<tr>
<td>bccvb</td>
<td>bccvb</td>
<td>bcvbvcb</td>
<td>cbvcbcvb</td>
</tr>
</tbody>
</table>
 
<script>
var monTableau =document.getElementById("monTableau")
var monNumero
 
monTableau.addEventListener("click", function(e){
// récupère la cible du click (le plus petit élément du tableau donc la cellule)
event = e.target
// Le numéro de la ligne correspond au parent de la cellule
monNumero = event.parentElement.rowIndex
 
},false)
 
// Vérifie que la variable monNumero prenne bien la valeur du numéro de la ligne
document.addEventListener("click" ,function(){
    console.log(monNumero)
})
 
</script>

Voila après tu fais faire ce que tu veux à ta fonction, les deux méthodes marchent bien que le onclick soit tout de même plus accessible et compréhensible pour un débutant

08/08/2017, 00h14
Loralina

Bonsoir,
C'est vrai qu'il parle peut-être d'un tableau HTML, vu qu'il dit "ligne... ajoutée".
"Tableau javascript" signifierait alors un tableau HTML géré par javascript et non un Array.

Un peu dans le même esprit que Proxy sur les Array, pour un tableau HTML, on peut utiliser MutationObserver.
10/08/2017, 11h02
devhercule

Je vous remercie pour vos réponses.

1/ Non, ce n'est pas moi qui gère les fonctions de modification de tab1.

2/ Non ce n'est pas un tableau html, c'est un Array

3/ l'API que j'utilise est le framework "Electron", qui permet de créer des applications web, c'est en nodejs.

4/ Pour être concret, le Tab1 est le tableau history d'un Navigateur web, au quel je n'ai pas accès.

Je voudrai remplir un tableau Tab2 à partir des modifications apportées sur webview.getWebContents().history

Vous savez, en naviguant sur le web, le tableau history est quotidiennement mis a jour, ajout de ligne, suppression (dans le cas de goBack()), modification de contenu d'une ligne, ca c'est l'API qui gère, tout ce que je veux faire c'est CAPTER ces modifs pour pouvoir mettre a jours mon Tab2 qui contiendra l'URL de chaque ligne du tableau history...
11/08/2017, 00h02
Loralina

Bonsoir,
Si webview.getWebContents().history est un vrai Array (et non du style de window.history), alors il est peut-être possible de s'en sortir en le redéfinissant avec new Proxy (éventuellement après avoir sauvegardé ses valeurs initiales dans un Array temporaire pour les récupérer juste ensuite).
Bien sûr, si l'application redéfinit le tableau, le proxy n'y sera plus associé.
Si cela peut arriver, il faut essayer de faire un watch de la propriété history, voir ici :
https://gist.github.com/eligrey/384583
https://developer.mozilla.org/fr/doc...x/Object/watch

Autrement, si un léger décalage dans le temps est acceptable, setInterval est envisageable.
Dans la fonction associée, vous pourriez regarder le contenu de webview.getWebContents().history à intervalles de temps réguliers de quelques millisecondes.