Discussion :

[paulselvan]

Bonjour,

Ma question se porte sur comment insérer en javascript de nouvelles eléments dans un array mutidimension ( listeLiens)

Chaque élément du tableau est constitué de 3 sous-éléments (titre,url et auteur)

J'ai essayé d'inserer dans ce tableau un nouveau élément via unshift method

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 listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
var titNom = 'AUTEUR';
var titTitre = 'OEUVRE';
var titUrl = 'URL';
var insertItem = '{titre:"' + titTitre + '",url:"' + titUrl + '",auteur: "' + titNom + '"},'
 
  listeLiens.unshift(insertItem);

Mais lorseque je l'affiche sur le console ainsi :

Code :

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

1
2
3
4
5
listeLiens.forEach(function(itemTab){
    console.log(itemTab.titre);
        console.log(itemTab.url);
        console.log(itemTab.auteur);
});

le nouveu élément ajouté est affiché 'UNDEFINED' au lieu des 'AUTEUR' ,'OUVRE' et 'URL'

Quelles modifs à apporter

Merci

[NoSmoking]

Bonjour,
à cette ligne

Code :

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

var insertItem = '{titre:"' + titTitre + '",url:"' + titUrl + '",auteur: "' + titNom + '"},'

tu crées une chaine de caractères et non un objet.

Il te faut faire

Code :

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

1
2
3
4
5
var insertItem = {
  "titre": titTitre,
  "url": titUrl,
  "auteur": titNom
};

[paulselvan]

merci NoSmoking
je crois comprendre lorsequ'on écrit par exemple
var insertItem = {...}; ( au lieu de var insertItem = '{...}' )
on crée un objet pour la méthode .unshift
-----
Par ailleurs une question dans :
listeLiens.unshift(insertItem);
si
insertItem est objet
.unshift est une méthode
mais listeLiens est également un objet ?

[Beginner.]

Salut,

Ma question se porte sur comment insérer en javascript de nouvelles eléments dans un array mutidimension ( listeLiens)

Je ne pense que ce soit un "array mutidimension", je pense qu'il n'y a qu'une seule dimension mais les éléments de cette array (tableau) sont des objets et ces derniers ont trois propriétés...

[psychadelic]

solution :

Code JavaScript :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
var listeLiens = [
      {
          titre: "So Foot",
          url: "http://sofoot.com",
          auteur: "yann.usaille"
      },
      {
          titre: "Guide d'autodéfense numérique",
          url: "http://guide.boum.org",
          auteur: "paulochon"
      },
      {
          titre: "L'encyclopédie en ligne Wikipedia",
          url: "http://Wikipedia.org",
          auteur: "annie.zette"
      }
  ];
 
var titNom = 'AUTEUR';
var titTitre = 'OEUVRE';
var titUrl = 'URL';
var insertItem = '{"titre":"'+titTitre+'","url":"'+titUrl+'","auteur":"'+titNom +'"}';
 
listeLiens.unshift(JSON.parse(insertItem));
 
 titNom = 'titNom';
 titTitre = 'tototo';
 titUrl = 'zurl';
 insertItem = '{"titre":"'+titTitre+'","url":"'+titUrl+'","auteur":"'+titNom +'"}';
 
listeLiens.unshift(JSON.parse(insertItem));
 
for (let itemTab of listeLiens ) {
  // console.log(JSON.stringify( itemTab ));
  console.log(itemTab.titre);
  console.log(itemTab.url);
  console.log(itemTab.auteur);
  console.log('----------------------');
}

l'astuce de l'utilisation du JSON.parse permet d'éviter d'écrire un "new" ( soit une instanciation d'objet à placer dans la table)

[paulselvan]

merci pour cette nlle façon de pg

[psychadelic]

Allez va, j'arrive pas à résister:

Code JavaScript :

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

1
2
 
listeLiens.unshift(JSON.parse(`{"titre":"${titTitre}","url":"${titUrl}","auteur":"${titNom}"}`));

[NoSmoking]

je crois comprendre lorsequ'on écrit par exemple
var insertItem = {...}; ( au lieu de var insertItem = '{...}' )

dans un cas, le premier, tu crées/initialises un objet en utilisant sa forme littérale, dans le second tu crées/initialises une chaîne de caractère.

insertItem est objet
.unshift est une méthode
mais listeLiens est également un objet ?

en javascript tout est objet et listeLiens est plus précisément un Array puisque disposant de la méthode unshift.

Pour appuyer ce qu’à écrit Beginner. les tableaux multidirectionnels ne sont qu’une vue de l’esprit.
Un tableau, Array, peut contenir tout et n’importe quoi, un caractère, une chaîne, un objet, une fonction, un autre tableau et que sais je encore, il en est de même pour les valeurs des propriétés des objets.

l'astuce de l'utilisation du JSON.parse permet d'éviter d'écrire un "new" ( soit une instanciation d'objet à placer dans la table)

j’ai du mal à comprendre le sens de ta phrase.
Les objets « type JSON » ont été créés pour permettre de convertir des chaînes de caractères en objet exploitable par un script (JSON.parse), et inversement pour pouvoir transmettre des objets par le réseau (JSON.stringify), émission d’une requête Ajax par exemple.

La syntaxe d’écriture d’un objet « type JSON » est rigoureuse et requière l’usage exclusif des guillemets pour les chaînes de caractères qui peuvent être omise pour les objets « javascript ».

Le parsage d’un objet « type JSON » sera toujours moins performant que l’affectation directe d’une valeur à une propriété d’un objet « javascript », sans parler de l’écriture et de la lisibilité lors de la maintenance. Le passage par les templates ajoute un second parsage et dans le cas présent n’apporte rien de plus, ou presque rien, au niveau de l’écriture.
Le résultat des trois écritures

Code :

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

1
2
3
4
5
6
7
8
9
10
 // objet littéral
var o = {
  "titre": titTitre,
  "url": titUrl,
  "auteur": titNom
};
// avec chaîne constituée
var c = JSON.parse('{"titre":"'+titTitre +'","url":"' +titUrl +'","auteur":"' +titNom+'"}') ;
// avec les templates
var t = JSON.parse(`{"titre":"${titTitre}","url":"${titUrl}","auteur":"${titNom}"}`) ;

On peut jouer avec, cela reste une possibilité offerte par le langage, mais qui à mon sens n’a pas à se retrouver dans un code en production.

[psychadelic]

<<== texte ajouté au message initial pour une meilleure compréhension==>

l'astuce de l'utilisation du JSON.parse permet d'éviter d'écrire un "new" ( soit une instanciation d'objet à placer dans la table)

j’ai du mal à comprendre le sens de ta phrase.
Les objets « type JSON » ont été créés pour permettre de convertir des chaînes de caractères en objet exploitable par un script (JSON.parse), et inversement pour pouvoir transmettre des objets par le réseau (JSON.stringify), émission d’une requête Ajax par exemple.

<<== fin de texte ajouté ==>
je te laisse juge :

Code JavaScript :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
console.log('--------------------t_Fruit_X--');
 
var t_Fruit_X = [];
 
var Obj_x = { fruit : '', nbre : 0 };
 
Obj_x.fruit = 'pomme';
Obj_x.nbre = 15;
 
t_Fruit_X.push(Obj_x);
 
Obj_x.fruit = 'poires';
Obj_x.nbre = 45;
 
t_Fruit_X.push(Obj_x);
 
for (let i=0; i<t_Fruit_X.length; i++) {
  console.log(i +'-->' + JSON.stringify( t_Fruit_X[i] ));
}
/* --
  0-->{"fruit":"poires","nbre":45}
  1-->{"fruit":"poires","nbre":45}
-- */
 
console.log('--------------------t_Fruit_Y  (new) --');
 
var t_Fruit_Y = [];
 
class Obj_Y{ constructor(){
        this.fruit = '';
        this.nbre = 0;
      }}
 
var ElmY = new Obj_Y;
ElmY.fruit = 'pomme';
ElmY.nbre = 15;
 
t_Fruit_Y.push(ElmY);
 
ElmY = new Obj_Y;
ElmY.fruit = 'poires';
ElmY.nbre = 45;
 
t_Fruit_Y.push(ElmY);
 
for (let i=0; i<t_Fruit_Y.length; i++) {
  console.log(i +'-->' + JSON.stringify( t_Fruit_Y[i] ));
}
/* --
  0-->{"fruit":"poires","nbre":45}
  1-->{"fruit":"poires","nbre":45}
-- */
 
console.log('--------------------t_Animal  (JSON.parse) --');
 
var t_Animal = [];
 
var Ages = [4,8];
var bestioles = ['boa','perroquet'];
 
for (let i=0; i<2; i++) {
  t_Animal.push(JSON.parse(`{"animal":"${bestioles[i]}","age":${Ages[i]}}`));
}
 
for (let i=0; i<t_Animal.length; i++) {
  console.log(i +'-->' + JSON.stringify( t_Animal[i] ));
}
 
/* --
  0-->{"animal":"boa","age":4}
  1-->{"animal":"perroquet","age":8}
-- */

D’ailleurs dans l'exemple de ton code tu à crée toi même 3 objets distincts (o, c, t).

la question n'est pas de savoir qu'elle est la meilleure méthode pour créer un objet JavaScript, mais le moyen le plus "court" pour les engranger "proprement" dans un tableau.

Qu'ensuite ils soient ou non placés dans un tableau, et de savoir si sa façon de coder est "bien" ou "pas bien", c'est hors sujet.

[NoSmoking]

je te laisse juge :

juge de quoi !?!

D’ailleurs dans l'exemple de ton code tu à crée toi même 3 objets distincts (o, c, t).

cela n’avais pas d’autre but que donner de la lisibilité au code de l’exemple.

la question n'est pas de savoir ... mais le moyen le plus "court" pour les engranger …

Non, la question posée, par paulselvan, est de savoir pourquoi la console lui affiche undefined, il a la réponse à sa question.

Ensuite tu interviens dans la discussion pour donner une autre approche, soit, mais ne nous interdit pas dans ce cas de donner également notre avis.

Pour en revenir à ton « challenge » (le moyen le plus "court" ) j’aurais dû écrire de façon plus succincte l’exemple et peut être n’y aurait-il pas eu de débat pardon polémique.

Donc le plus court est

Code :

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

1
2
3
4
5
6
7
8
9
10
var tab = [];
var titTitre = "valeur Titre";
var titUrl = "valeur URL";
var titNom = "valeur Nom";
// objet littéral
tab.unshift({titre: titTitre, url: titUrl, auteur: titNom});  // on peut même supprimer les espaces
// avec JSON et chaîne constituée
tab.unshift(JSON.parse('{"titre":"'+titTitre+'","url":"'+titUrl+'","auteur":"'+titNom+'"}'));+'"}'));
// avec JSON et les templates
tab.unshift(JSON.parse(`{"titre":"${titTitre}","url":"${titUrl}","auteur":"${titNom}"}`));

...je laisse libre chaque lecteur de compter les caractères et/ou choisir sa préférence, j'ai déjà exprimé mon opinion à ce sujet.

Si tu veux ouvrir un débat n’hésite pas à ouvrir ta propre discussion.

Me concernant, cette discussion est close et je pense que paulselvan saura utiliser une ou l’autre des méthodes fonction de son ressenti.

[psychadelic]

juge de quoi !?!

J'ai modifié mon texte précédent pour que tu puisse comprendre que je n'ai fait que répondre à ta question.