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.