Les array en javascript

Version imprimable

Bonjour à tous.
J'ai un tableau html qui contient en ligne les articles achetés et en colonne (Id_Prouit, nom_Produits,quantité, prix total). Je voudrais mettre le contenu de ce tableau dans un "Array" pour les insérer dans ma base mysql ; ci-après la fonction.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function validerPanier() { var arrayLignes = document.getElementById("Panier").rows; var nbrLigne = arrayLignes.length; var MonTableau = new Array(nbrLigne,nbrColonne); for(var i=2; i<nbrLigne; i++) { var arrayColonnes = arrayLignes[i].cells; var nbrColonne = arrayColonnes.length; for(var j=0; j<nbrColonne; j++) { MonTableau[i,j]=arrayColonnes[j].textContent; alert("ligne " + i +" colone " + j + " = " + monTableau[i,j]); } } alert("nombre de ligne = "+nbrLigne); alert("nombre de colonne = "+nbrColonne); }
Pour vérifier cette fontion j'ai procéder par des "alert" ça marche ligne par ligne. Le code suivant pour vérifier le contenu en entier
Code:

1 2 3 4 5 6 7 for(var i=2; i=nbrLigne; i++) { for(var j=0; j<nbrColonne; j++) { alert("ligne " + i +" colone " + j + " = " + MonTableau[i,j]); } }
Mais à la fin je n'arrive pas à lister le contenu de toute la table. Seule la dernière ligne est affichée. Pouvez vous m'aider ? Merci.

27/10/2013, 14h20
NoSmoking
Bonjur,
cela commence mal avec

Citation:

var MonTableau = new Array(nbrLigne,nbrColonne);

cette façon de déclarer un Array crée un tableau de 2 éléments valant nbrLigne et nbrColonne, cette valeur valant undefined au moment de son utilisation d'ailleurs, et non pas un tableau de tableau.
:faq: Comment déclarer et initialiser un tableau ?
il vaudrait mieux que tu partes sur
Code:

1 2 3 4 5 var MonTableau = []; for (var i = 2; i < nbrLigne; i++) { MonTableau[i] = []; // monTableau[i] est aussi un tableau // la suite }
voilà pour un début.

bonjour.

je te propose de lire cette discussion.
http://www.developpez.net/forums/d12...e-entree-plus/

Un tableau de tableaux n'est pas une matrice. il te faut donc soit garantir le contenus de chaque éléments du tableau de tableau. tu dois donc garantir que chaque élément est un tableau.
tu dois aussi garantir que chaque tableau a la bonne longueur.
et enfin tu doit garantir que chaque élément d'un des tableaux est bien ce que tu attend.

mais dans ton cas je ne comprends pas pourquoi tu utilise des tableaux en effet tu dis toi-même que les tableaux contenu dans le tableau principal à un sémentique Id_Prouit, nom_Produits,quantité, prix total
perso j'utiliserais des objets.
ainsi tu as un tableau d'objet.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var Id_Prouit=0, nom_Produits=1,quantite=2, prix total=3; var arrayLignes = document.getElementById("Panier").rows; var nbrLigne = arrayLignes.length; var MonTableau = new Array(); for(var i=2; i<nbrLigne; i++) { MonTableau.push({ "Id_Prouit" : arrayLignes[i].cells[Id_Prouit], "nom_Produits": arrayLignes[i].cells[nom_Produits], "quantite" : arrayLignes[i].cells[quantite], "total" : arrayLignes[i].cells[total] }); }
le B.A.BA de la syntaxe des tableaux en js

Code:

new Array(a, b);

le constructeur Array peut prendre autant de paramètres que l'on veut les valeurs de ces paramètres seront TOUS, les valeurs initiales du contenu du tableau.

Un tableau javascript n'a et ne peut avoir QU'UNE et UNE SEULE dimension.

Code:

new Array(3, 4);

Signifie créer un tableau à UNE dimension contenant les valeurs 3 et 4.
Il ne signifie pas créer un tableau à DEUX dimensions de 3 lignes et 4 colonnes.

les matrices n'existant pas en js il est impossible d'écrire

Code:

MonTableau[i,j]=arrayColonnes[j].textContent;

A+JYT

Bonsoir à tous. Et merci pour sekaijin d'avoir répondu.

Citation:

Envoyé par sekaijin

je te propose de lire cette discussion.
http://www.developpez.net/forums/d12...e-entree-plus/

J'ai lu et relu la discussion. Mais n'étant pas fort en js et j'apprend:oops: je n'ai pas compris ton code sur tous l'ajout 'MonTableau.push'
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var Id_Prouit=0, nom_Produits=1,quantite=2, prix total=3; var arrayLignes = document.getElementById("Panier").rows; var nbrLigne = arrayLignes.length; var MonTableau = new Array(); for(var i=2; i<nbrLigne; i++) { MonTableau.push({ "Id_Prouit" : arrayLignes[i].cells[Id_Prouit], "nom_Produits": arrayLignes[i].cells[nom_Produits], "quantite" : arrayLignes[i].cells[quantite], "total" : arrayLignes[i].cells[total] }); }
tu veux bien m'expliquer ? Merci

push est une méthode qui ajoute un élément à un tableau.

Code:

1
2
tab = new Array(1, 2, 3, 4); // tab est un tableau qui contient les valeurs 1, 2, 3, 4
tab.push(9); // tab est un tableau qui contient les valeurs 1, 2, 3, 4, 9

la suite est la construction d'un objet

Code:

1
2
3
4
5
6
obj = {
    "Id_Prouit"   : 12345,
    "nom_Produits": "Mon Produit",
    "quantite"    : 10,
    "total"       : 15
  };

cet objet a les membres Id_Produit, nom_Produits, quantite, total.
chaque membre est accessible de deux façon.

Code:

1
2
console.log(obj.total); // 15
console.log(obj["total"]); // 15

le code

Code:

1
2
3
4
5
6
  MonTableau.push({
    "Id_Prouit"   : arrayLignes[i].cells[Id_Prouit],
    "nom_Produits": arrayLignes[i].cells[nom_Produits],
    "quantite"    : arrayLignes[i].cells[quantite],
    "total"       : arrayLignes[i].cells[total]
  });

Ajoute à mon tableau un objet contenant les infos d'un produit.
A+JYT

31/10/2013, 19h05
s.rais

Merci beaucoup c'est claire.

Comment doit-je faire pour récupérer le contenu ?
31/10/2013, 22h44
petit-lapin
Si dans la ième cellule de ton tableau, tu as ton objet, alors le code qui suit affiche la valeur de l'attribut "total" dans une alert!
Code:

1 2 alert(MonTableau[i].total )

bonjour et merci petit_lapin

J'ai essayé mais ça marche pas. Ci-après le code :

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
var Id_Prouit=0, nom_Produits=1,quantite=2, prix_total=3;
	var arrayLignes = document.getElementById("Panier").rows; 			
	var nbrLigne = arrayLignes.length;									
	var MonTableau = new Array();
	alert("nombre de ligne = "+nbrLigne); //ça affiche le nombre de ligne
	for(var i=2; i<nbrLigne; i++)												
	{
  		MonTableau.push({
    		"Id_Prouit"   : arrayLignes[i].cells[Id_Prouit],
    		"nom_Produits": arrayLignes[i].cells[nom_Produits],
    		"quantite"    : arrayLignes[i].cells[quantite],
    		"total"       : arrayLignes[i].cells[total]
  			});
	}
	alert ("i= " + i); //ça affiche 4 c'est à dire le nombre de ligne et après rien de s'affiche
	alert(MonTableau[3].total);
	for(var i=2; i<nbrLigne; i++)												
	{
		alert(MonTableau[i].Id_Produit);
		alert(MonTableau[i].nom_Produits );
		alert(MonTableau[i].quantite);
		alert(MonTableau[i].total );
 
	}

auriez vous une réponse ? Merci.

tu peux très simplement mettre un point d'arrêt à la première ligne et ainsi avancer pas à pas. cela te permets de voir quelle sont les valeurs que tu obtiens et ce que tu mets dans tes objets.

Pour remplir MonTableau on parcour arrayLignes de 2 à nbrLigne (4). on a donc 2 éléments de moins dans MonTableau. il est donc logique que MonTableau[3] soit undefined. (4 - 2 = 2) < 3

voici l'exemple que jai fais
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 document.body.innerHTML='<table border="1" id="Panier">'+ '<thead><tr><th>Month</th><th>Savings</th></tr></thead>'+ '<tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot>'+ '<tbody><tr><td>January</td><td>$100</td></tr>'+ '<tr><td>February</td><td>$80</td></tr></tbody></table>'; var Id_Produit=0, nom_Produits=1,quantite=2, prix_total=3; var arrayLignes = document.getElementById("Panier").rows; var nbrLigne = arrayLignes.length -1; // on ne prends pas le tfoot donc -1 var MonTableau = new Array(); console.log("nombre de ligne = "+nbrLigne); //ça affiche le nombre de ligne for(var i=1; i<nbrLigne; i++) // on ne prends pas le thead donc i = 1 //on a donc 2 lignes de moins le thead et le tfoot. { MonTableau.push({ //on ne veux que le texte pas la cellule. cells[indice].textContent "Id_Produit" : arrayLignes[i].cells[Id_Produit].textContent, "nom_Produits": arrayLignes[i].cells[nom_Produits].textContent }); } console.log("i = " + i); for(var j=0; j<MonTableau.length; j++) { console.log("j = " + j); console.log(MonTableau[j].Id_Produit); console.log(MonTableau[j].nom_Produits ); }
et voila ce que ça affiche
Code:

1 2 3 4 5 6 7 8 nombre de ligne = 3 i = 3 j = 0 January $100 j = 1 February $80
J'ai excplicitement utiliser une variable j pour bien dissocier les indices i de
arrayLignes qui contient 4 éléments des indices j de MonTableau qui contient 2 éléments

pour tester avec chrome ou safari ouvre l'url about:blank
fais un clic droit et "inspecete l'élément"
clique sur la console et colle le code.

A+JYT

01/11/2013, 16h34
sekaijin

attention GROS DOIGTS dans mes posts précédents.
il est écrit Id_Prouit à la place de Id_Produit.

A+JYT

Salut, voici un exemple.
Code:

1 2 3 4 5 6 7 var x = [] x.push({ "un": 1, "deux": 2, "trois": 3, }); alert(x[0].un)
affiche 1 dans une alert

@s.rais :
on peut lire dans ton code

Code:

var Id_Prouit=0, nom_Produits=1,quantite=2, prix_total=3;

et un peu plus loin

Code:

1
2
3
4
5
6
MonTableau.push({
    "Id_Prouit": arrayLignes[i].cells[Id_Prouit],
    "nom_Produits": arrayLignes[i].cells[nom_Produits],
    "quantite": arrayLignes[i].cells[quantite],
    "total": arrayLignes[i].cells[total]  // ICI total n'est pas défini, peut être prix_total plutôt...
});

02/11/2013, 18h25
sekaijin

Oui NoSmoking j'ai allerté sur mes gros doigts
bien vu pour le total

mais dans alert(MonTableau[3].total);le PB c'est que le tableau n'a que 2 éléments. (rempli en lisant les ligne de i=2 à i < 4) donc MonTableau[3] est undefined

A+JYT