11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Construction d'un objet à partir d'un objet

Bonjour à tous
suite de mon passage à ES6
Actuellement j'ai souvent des initialisations d'objet de ce type :

class Author {
    constructor(data) { //data est un objet reçu par AJAX
        for(let property in data) this[property] = data[property];
        ...
    }

c'est à dire que je commence par initialiser les propriétés de l'objet Author à partir des propriétés de même nom de l'objet data
Je me demande si le mécanisme de déconstruction ne pourrait pas permettre d'effectuer cette initialisation plus simplement.
Une idée ?
Modifié par PapyJP (02 Aug 2022 - 09:43)
Pour déconstruire, tu peux aussi utilisé les spreads typescript (spread = ... => trois petits points)
cela fonctionne pour les objets bien sur
exemple : 

let origArrayOne = [ 1, 2, 3];              //1,2,3
 
let copyArray = [...origArrayOne];            //1,2,3

Modifié par JENCAL (01 Aug 2022 - 15:38)
Merci de ta réponse
Sauf que ce n'est pas ce que je cherche : ce n'est ni let ni const (ou var) mais this
l'objet data est obtenu par AJAX, data = JSON.parse(ajaxData) a l'aspect suivant

data = {
	"authorID": "Byrd",
	"firstName": "William",
	"lastName": "Byrd",
	"birth": "1539",
	"death": "1623",
	"url": "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)",
	"image": "/images/auteurs/Byrd.jpg"
}

si je fais new Author(data) la première chose à faire est de mettre ces informations dans le nouvel objet
Pour l'instant je fais une boucle d'initialisation for... in

class Author {
    constructor(data) {
       for(let property in data) this[property] = data[property;
      ........
    }

Je cherche s'il existe maintenant une syntaxe plus "à la mode"
Ce n'est pas très important, cette formulation fonctionne très bien depuis des années, c'est juste pour savoir.
Modifié par PapyJP (01 Aug 2022 - 16:18)
\ô/
tu peux faire effectivement plus concis :
class Author {
  constructor(data) {
    //for(let property in data) this[property] = data[property];
    Object.assign(this, data);
  }
}
Meilleure solution
Bonsoir,

Si tu veux juste copier l'objet data dans un autre objet, tu peux le faire directement par le 'Spread' : 


data = {
	"authorID": "Byrd",
	"firstName": "William",
	"lastName": "Byrd",
	"birth": "1539",
	"death": "1623",
	"url": "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)",
	"image": "/images/auteurs/Byrd.jpg"
}


class Author 
{
  constructor(data) { 
      for(let property in data) this[property] = data[property];
  } 
}

let author1 = new Author(data);
console.log(author1);
/* 
Object { authorID: "Byrd", firstName: "William", lastName: "Byrd", birth: "1539", death: "1623", url: "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)", image: "/images/auteurs/Byrd.jpg" }
*/


let author2 = {...data};
console.log(author2);
/*
Object { authorID: "Byrd", firstName: "William", lastName: "Byrd", birth: "1539", death: "1623", url: "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)", image: "/images/auteurs/Byrd.jpg" }
*/
Intéressant, je vais essayer les deux approches et voir ce que ça donne.
Modifié par PapyJP (01 Aug 2022 - 19:01)
Je ne comprends pas comment on peut utiliser le spread dans un construct.
this = {...data}; ne fonctionne bien entendu pas plus que this = data;
Bonsoir,

Non, le spread operator ne doit pas être utilisé dans le constructeur de la class, il donne juste une copie de l'objet 'data' (dans ton exemple) SANS passer par la class.

La class n'est qu'un modele. Sa finalité est de créer des instances et ce sont les instances qu'on utilise (ce qu'on affiche à l'écran c'est l'instance, ce qu'on enregistre dans la base de donnée c'est l'instance...).

Dans mon exemple, on passe de l'objet 'data' directement à un autre objet, SANS passer par une class.

Donc ca ne sert pas à remplacer la ligne du constructeur (désolé, s'il y a eu confusion).


NB : le titre c'était "Construction d'un objet à partir d'un objet"
Modifié par alain_47 (01 Aug 2022 - 20:11)
Merci pour cette clarification
Effectivement le titre du sujet n’était pas approprié, pour moi le mot "Construction" impliquait une classe avec un constructor

Mon contexte c’est de récupérer par AJAX des objets provenant d’une base de données et de les doter de méthodes appropriées pour finalement générer des éléments du DOM et les doter de possibilités de réaction à différents types d’événements, surtout des clics sur l’un ou l’autre des éléments du DOM issus de ces objets.
Par exemple l’objet Author décrit ci dessus permet génère une <figure> contenant l’image et une <figcaption> qui regroupe le nom de l’auteur et ses dates. Quand on clique sur l’image ça ouvre la page Wikipedia concernant l’auteur.
Modifié par PapyJP (02 Aug 2022 - 09:42)
Voici une des lignes d'une page qui représente le programme des œuvres qui seront travaillées dans le prochain stage de chant choral
upload/1659426900-48769-progitem.png

Un clic sur l'image ouvre la page Wikipédia, un clic sur une chacune des icônes ouvre une représentation différente de l’œuvre, de gauche à droite:
- la partition en pdf
- une page html contenant le texte en anglais et sa traduction en français
- le petit rond supérieur ouvre une page HTML qui permet de faire jouer la pièce en faisant défiler la partition à l'écran
- le petit rond inférieur télécharge cette page zippée sur l'ordinateur de l'utilisateur

Chacun de ces éléments provient d'informations extraites de la base de données.
Cette ligne correspond à une structure d'objets JavaScript imbriqués:
ProgItem représente la ligne qui contient
- une propriété author qui vaut un objet Author
- une propriété work qui vaut un objet Work qui contient lui même
* une propriété title
* une propriété workfiles qui vaut un tableau d'objet WorkFile représentant chacun des fichiers
Sujet clos
Aller à