Les array en javascript

**s.rais** · 27/10/2013, 11h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 27/10/2013, 14h20

Bonjur,
cela commence mal avec

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.

Comment déclarer et initialiser un tableau ?
il vaudrait mieux que tu partes sur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**sekaijin** · 28/10/2013, 13h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

A+JYT

**s.rais** · 31/10/2013, 17h35

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

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

je n'ai pas compris ton code sur tous l'ajout 'MonTableau.push'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sekaijin** · 31/10/2013, 18h06

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**s.rais** · 31/10/2013, 19h05

Merci beaucoup c'est claire.

Comment doit-je faire pour récupérer le contenu ?

**petit-lapin** · 31/10/2013, 22h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert(MonTableau[i].total )

**s.rais** · 01/11/2013, 14h37

bonjour et merci petit_lapin

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**sekaijin** · 01/11/2013, 16h31

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sekaijin** · 01/11/2013, 16h34

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

A+JYT

**petit-lapin** · 02/11/2013, 14h57

Salut, voici un exemple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 02/11/2013, 18h04

@s.rais :
on peut lire dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et un peu plus loin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sekaijin** · 02/11/2013, 18h25

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

Les array en javascript

JavaScript

Discussions similaires

Partager

Partager