CODEWITHSUNDEEP
meteordynamicmeteor-blaze
user2829319
user2829319

Reputation: 319

Meteor Blaze display dynamic values of an object in a table

I am new in Meteor and I am trying to display some results of an object in a table, the values and rows change as per the result, which is of the following format:

obj={10: [“1”, “3”, “0”, “0”]
11: [“1”, “7”, “0”, “0”]
12: [“1”, “12”, “0”, “0”]}

so the data are dynamic but not a collection, each element of the array is a cell of the table and from the above example I need a table with 3 rows and 5 columns

From what I read so far I was directing to:

aslagle:reactive-table

that can be used also for plain array as it is written. Is that the right path or too complex for what I want to show in the table, is there any suggestion?

Upvotes: 0

Views: 323

Answers (1)

Jankapunkt
Jankapunkt

Reputation: 8413

You can use a ReactiveVar or ReatciveDict to display data reactively. You need to make it iterable, first. Best is to do this in the Template.onCreated function. Lets say your Template has the name "myTable":

Template.myTable.onCreated(function onMyTableCreated() {
  const instance = this
  instance.state = new ReactiveDict()
  instance.state.set('entries', [])

  instance.autorun(() => {
    const obj = // ... however you get your object
    const entries = Object.keys(obj).mapkey => ({
      key:key,
      value: obj[key]
    }))
    instance.state.set('entries', entries)
  })
})

Now you can define a helper that returns your already processed entries in the right format to your template:

Template.myTable.helpers({
  entries() {
    return Template.instance().state.get('entries')
  }
})

Now you can easily iterate over your entries and their values:

<template name="myTable">
  <table>
  <thead>
    <tr>
    {{#each entries}}
      <th>{{this.key}}</th>
    {{/each}}
    </tr>
  </thead>
  <tbody>
  {{#each entries}}
    <tr>
      <!-- this.value is the array, such as [“1”, “3”, “0”, “0”] -->
      {{#each this.value}}
      <td>{{this}}</td>
      {{/each}}
    </tr>
  {{/each}}
  </tbody>
  </table>
</template>

Things to take away from here:

  • Objects need to be restructured to iterable structures
  • Restructuring should be done in onCreated - autorun (which only re-runs when data changes) and not in helpers (which can run multiple times in a rendering cycle).
  • Implementing your own table is good for learning the basics of Blaze
  • Use packages to handle complex arbitrary data (note the learning curve)

Upvotes: 2

Related Questions