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.