1
votes

Avoir un problème pour déstructurer mes données sur React

Le comingWork contient mes données API. Ce que je veux ici, c'est l'insérer sous forme de tableau pour l'afficher sur mon calendrier, voici l'exemple de données structurées que je veux.

En fait, le comingWork contient beaucoup d'attributs mais je souhaitez afficher ces trois attributs sur mon calendrier.

  const events = [
    {
      id: 1,
      title: 'My event',
      start: new Date(2020, 4, 8, 10, 0),
      end: new Date(2020, 4, 8, 14, 0),
    },
  ];

Exemple de tableau que je souhaite créer à partir de données .

XXX

reactjs react-big-calendar

0 commentaires

4 Réponses :

2
votes

La carte que vous avez définira simplement chaque valeur sur true si toutes les valeurs sont truey ou false si l'une d'elles est false. si vous voulez extraire ces 3 valeurs, changez simplement la carte en ceci:

const data = upcomingWork.map(({id, title, created_at}) => ({id, title, created_at}))

2 commentaires

Juste un suivi toutes vos réponses sont correctes mais je suis ce code. Puis-je formater mes dates avant qu'elles ne soient transmises à mon tableau en utilisant Moment . Mais le début ne me donne qu'une valeur indéfinie const data = comingWork.map (u => ({id: u.id, title: u.title, start: Moment (u.created_at.format ( 'aaaa mm jj hh m')), fin: u.created_at,}));

est-ce que l'objet created_at a moment? sinon .format appellerait simplement une fonction non définie sur une chaîne? Moment (u.created_at, "aaaa mm jj hh mm") serait le moyen de le faire si created_at est une chaîne

1
votes

Ce que vous avez renvoyé ne vous donnera aucune donnée souhaitée. Je pense que vous avez mal compris la méthode cartographique de Array.

À la place, vous devriez utiliser une carte comme:

const data = upcomingWork.map(u => {
             const {id, title, created_at} = u;
                 return {
                   id,
                   title,
                   created_at
                 }
              });

0 commentaires

0
votes

const data = upcomingWork.map(u => {
    return { id: u.id, title: u.title };
});

0 commentaires

0
votes

Votre nextWork.map ne crée pas du tout d'objet, il n'a donc aucune chance de créer les données attendues. Au lieu de cela, vous pouvez mapper les propriétés appropriées de l'objet u aux nouvelles clés d'un nouvel objet que vous créez.

const events = upcomingWork.map(u => ({
    id: u.id,
    title: u.title,
    start: u.created_at,
    end: u.end    //change the u.end to whatever property you have in your data
}));

(le nouvel objet doit être encapsulé dans ( ) pour s'assurer que JS l'interprète comme une valeur et non comme un corps de fonction)

0 commentaires