Meteor - Comment utiliser {{each}} pour afficher plusieurs tableaux de mongoDB dans une table?

Question

J'ai une collection nommée « PIDS » dans MongoDB et avec plusieurs tableaux:

{ 
    "_id" : "Coms>f41a3480af751a7a", 
    "pIds" : [ 
     "pid_833d82c2f32b7dc0", 
     "pid_833d82c2f32b7dc0", 
     "pid_833d82c2f32b7dc0", 
    ], 
    "dudes" : [ 
     "AB", 
     "AC", 
     "BC" 
    ], 
    "ho" : [ 
     "Coms>f41a3480af751a7a", 
     "Coms>f41a3480af751a7a", 
     "Coms>f41a3480af751a7a" 
    ], 
    "ps" : [ 
     "vf", 
     "ou", 
     "rwf" 
    ], 

} 

Maintenant, je veux rendre ces éléments dynamiques dans une table HTML afin que la table change de la même façon les données dans les changements de collecte . La table devrait donc automatiquement ajouter de nouveaux éléments, lorsque de nouveaux éléments sont écrits dans la collection "pIds". J'ai pensé à utiliser {{each}}.

JS-Helper:

Template.home.helpers({ 
    'pIdsRendering': function() { 
    if (Meteor.userId()) { 
    var pId = pIds.find({'_id': Session.get('pIdshome')}).fetch(); 

    return pId; 
    } 
}, 
}); 

HTML:

     <tbody> 

{{#each pIdsRendering}} 

     {{#each pIds}} 

          <tr><td>{{this}}</td></tr> 
      {{/each}} 
{{/each}} 

{{#each pIdsRendering}} 

     {{#each dudes}} 

          <tr><td>{{this}}</td></tr> 

     {{/each}} 

    {{/each}} 
      [...and so on...] 

         </tbody> 

En fait, cela fonctionne et de nouveaux éléments sont ajoutés à la table, mais je ne peux pas simplement mettre le contenu dans les cellules de droite la table. Il met le contenu en une seule colonne comme les données de la table seraient écrites comme ceci:

Donc, je pense qu'il est « ordre logique », mais je ne peux pas le faire. ..dans la fin de la table devrait ressembler à ceci:

Answer 1

Vous créez pour chaque élément du tableau nouveau tag <tr> et c'est la raison pour laquelle chaque article se trouve dans une nouvelle ligne. Je vous suggère de changer un peu votre schéma de collection. Je le ferais comme ci-dessous:

{ 
    "_id" : "Coms>f41a3480af751a7a", 
    "data": [ 
    { 
     "pid": "pid_833d82c2f32b7dc0", 
     "dude": "AB", 
     "ho": "Coms>f41a3480af751a7a", 
     "ps": "vf" 
    }, 
    { 
     "pid": "pid_833d82c2f32b7dc0", 
     "dude": "AC", 
     "ho": "Coms>f41a3480af751a7a", 
     "ps": "ou" 
    }  
    ] 
} 

Ensuite, dans votre modèle Blaze vous pouvez afficher les enregistrements beaucoup plus facile

{{ #each record }} 
    {{ #each data }} 
    <tr> 
     <td>{{ pid }}</td> 
     <td>{{ dude }}</td> 
     <td>{{ ho }}</td> 
     <td>{{ ps }}</td> 
    </tr> 
    {{ /each }} 
{{ /each }} 

Votre schéma réel peut conduire à des erreurs inattendues. Par exemple, lorsque le tableau pIds aura plus d'éléments que dudes. Il est plus difficile de le valider. En utilisant un objet, vous pouvez le faire beaucoup plus facilement. Aussi, je suppose que vous voulez lier l'élément pIds [index] avec l'élément dudes [index]. Dans ce cas, l'utilisation de tableaux comme vous l'avez fait n'est pas une bonne méthode.