unshift méthode sur array multidimension

Version imprimable

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:

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:

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

04/04/2018, 19h43
NoSmoking
Bonjour,
à cette ligne

Code:

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:

1 2 3 4 5 var insertItem = { "titre": titTitre, "url": titUrl, "auteur": titNom };
04/04/2018, 20h10
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 ?
04/04/2018, 21h38
Beginner.

Salut,

Citation:

Envoyé par paulselvan

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...

solution :

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
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)

05/04/2018, 01h00
paulselvan

merci pour cette nlle façon de pg

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

Code:

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

Citation:

Envoyé par paulselvan

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.

Citation:

Envoyé par paulselvan

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.

Citation:

Envoyé par psychadelic

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:

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.

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

Citation:

Envoyé par NoSmoking

Citation:

Envoyé par psychadelic

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 8-):
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 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.

Citation:

je te laisse juge 8-):

:koi: juge de quoi !?!

Citation:

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.

Citation:

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:

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.

07/04/2018, 16h36
psychadelic

Citation:

Envoyé par NoSmoking

:koi: 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.