Meteor/Mongodb: Wie durchquere ich ein Array und erhalte die Details des überfahrenen Objekts in meiner Vorlage mit HTML?

Question

Ich versuche eine Webapp in Meteor für Buchungen zu erstellen.

Ich habe ein Sammlungsschema für jede Woche so eingerichtet, mit einem Datum Objekt an der Woche Montag als Referenz. Die Nummern, die nach den Tagen angezeigt werden, sind Slots verfügbar. Entnommen mongole:

{ 
    "_id": "CtXjDeaH7KE6YsubJ", 
    "mondayDate": "2016-07-25T00:00:00.000Z", 
    "timeslots": [ 
    { 
     "slot": "0800 to 1000", 
     "days": [ 
     { 
      "25/7": 1, 
      "26/7": 2, 
      "27/7": 0, 
      "28/7": 0, 
      "29/7": 1, 
      "30/7": 0, 
      "31/7": 2 
     } 
     ] 
    }, 
    { 
     "slot": "1000 to 1200", 
     "days": [ 
     { 
      "25/7": 1, 
      "26/7": 2, 
      "27/7": 0, 
      "28/7": 0, 
      "29/7": 2, 
      "30/7": 1, 
      "31/7": 0 
     } 
     ] 
    }, 
    { 
     "slot": "1200 to 1400", 
     "days": [ 
     { 
      "25/7": 1, 
      "26/7": 2, 
      "27/7": 3, 
      "28/7": 0, 
      "29/7": 0, 
      "30/7": 0, 
      "31/7": 2 
     } 
     ] 
    }, 
    { 
     "slot": "1400 to 1600", 
     "days": [ 
     { 
      "25/7": 0, 
      "26/7": 2, 
      "27/7": 0, 
      "28/7": 2, 
      "29/7": 0, 
      "30/7": 1, 
      "31/7": 1 
     } 
     ] 
    }, 
    { 
     "slot": "1600 to 1800", 
     "days": [ 
     { 
      "25/7": 0, 
      "26/7": 2, 
      "27/7": 0, 
      "28/7": 2, 
      "29/7": 0, 
      "30/7": 1, 
      "31/7": 1 
     } 
     ] 
    } 
    ] 
} 

In meiner Vorlage, mit spacebars, möchte ich ein Raster erstellen, die pro Zeitschlitz eine Taste hat pro Tag.

^ein Bild von dem, was ich erreichen möchte.

Previosly, ich schaffte es, die Tasten schön ausgelegt zu bekommen, aber sie hatten keine ID-Werte, um zum nächsten Schritt überzugehen - die genauen Steckplatzinformationen für bestätigte Buchungen in eine andere Sammlung zu übertragen.

Ich brauche das Zeitfenster und das Datum, die in jeder Tasten-ID enthalten sein sollen. Wie erreiche ich das mit Leertasten? Ich habe Probleme, auf die richtigen Elemente im Array zu verweisen.

<!-- table stuff --> 
<tbody> 
    {{>schedtable thisweekdata}} <!-- thisweekdata is a helper function, it returns "timeslots" from the array above --> 
</tbody> 
<!-- etc... --> 

<template name="schedtable"> 
    {{#each this}} 
    <tr> 
    <td>{{slot}}</td> <!-- works, this appears in the browser for each timeslot--> 
    {{>eachslot days}} 
    </tr> 
</template> 

<template name="eachslot"> 
    <td> 
    {{#each this}} 

     <!-- I'm doing something wrong here, it only traverses 
     once across what I think is the timeslots.days array and it's done --> 


     <button id={{this.?????}}>Click to Book</button> 
     <!-- this is where I need help, how do I get it to 
     iterate the length of the timeslots.days array, and also 
     push the value of each item into the id? Something like 
     this.[i] where i can dynamically traverse the array. Can I 
     obtain the key value? ("25/7","26/7", etc) --> 


    {{/each}} 
    </td> 
</template> 

Ich verstehe, dass ich mein Schema möglicherweise auch ein bisschen ändern muss.

Answer 1

Ich bin ein Dummy, ich habe es herausgefunden. Zunächst war mein Schema falsch. Für das Array days hatte ich ein Array von nur einem Objekt, das mehrere Objekte für jeden Tag hatte. Um es zu beheben, änderte ich das Array days zu einem Array von Objekten, die zwei Felder hatten, d und free, um das Datum und die Anzahl der freien Steckplätze darzustellen.

{ 
    "_id": "CtXjDeaH7KE6YsubJ", 
    "mondayDate": "2016-07-25T00:00:00.000Z", 
    "timeslots": [ 
    { 
     "slot": "0800 to 1000", 
     "days": [ 
     { 
      "d": "2016-07-25", 
      "free": 1 
     }, 
     { 
      "d": "2016-07-26", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-27", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-28", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-29", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-30", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-31", 
      "free": 1 
     } 
     ] 
    }, 
    { 
     "slot": "1000 to 1200", 
     "days": [ 
     { 
      "d": "2016-07-25", 
      "free": 1 
     }, 
     { 
      "d": "2016-07-26", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-27", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-28", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-29", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-30", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-31", 
      "free": 1 
     } 
     ] 
    }, 
    { 
     "slot": "1200 to 1400", 
     "days": [ 
     { 
      "d": "2016-07-25", 
      "free": 1 
     }, 
     { 
      "d": "2016-07-26", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-27", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-28", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-29", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-30", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-31", 
      "free": 1 
     } 
     ] 
    }, 
    { 
     "slot": "1400 to 1600", 
     "days": [ 
     { 
      "d": "2016-07-25", 
      "free": 1 
     }, 
     { 
      "d": "2016-07-26", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-27", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-28", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-29", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-30", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-31", 
      "free": 1 
     } 
     ] 
    }, 
    { 
     "slot": "1600 to 1800", 
     "days": [ 
     { 
      "d": "2016-07-25", 
      "free": 1 
     }, 
     { 
      "d": "2016-07-26", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-27", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-28", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-29", 
      "free": 2 
     }, 
     { 
      "d": "2016-07-30", 
      "free": 0 
     }, 
     { 
      "d": "2016-07-31", 
      "free": 1 
     } 
     ] 
    } 
    ] 
} 

Dann in meiner Vorlage html:

<template name="schedtable"> 
{{#each this}} <!-- will iterate over each timeslot --> 
    <tr> 
     <td>{{slot}}</td> 
     {{> eachslot days }} 
    </tr> 
    {{/each}} 
</template> 

<template name="eachslot"> 
    {{#each item in this}} 
    <td> 
     {{#if item.free}} 
     <button class="btn btn-success bookbtn" id={{item.d}}{{../slot}}>Book this slot</button> 
     {{else}} 
     <button class="btn btn-disabled" >Not Available</button> 
     {{/if}} 
    </td> 
    {{/each}} 
</template>