Saving values of 10 input fields in one object

help
1

I have several input fields in my template (sources of an article)
looks like this:

<div class="input-group">
 <div class="input-group-addon">Source 1</div>
 <input name="titleSource1" id="titelSource1" type="text">
 <input name="source1" id="source1" type="text">
</div>
<div class="input-group">
 <div class="input-group-addon">Source 2</div>
 <input name="titleSource2" id="titelSource2" type="text">
 <input name="source2" id="source2" type="text">
</div>
<div class="input-group">
 <div class="input-group-addon">Source 3</div>
 <input name="titleSource3" id="titelSource3" type="text">
 <input name="source3" id="source3" type="text">
</div>
.
.
.

10 of them in total.

I use a keyup event to save the input of each field in a session variable.
I need that, so I can display a life preview of the written article.

Can anyone think of an effective way to store all inputs in an object so that I can easily handle all the information?

I was thinking something along:

[{"title": "value1", "source": "value1"}, {"title": "value2", "source": "value2"}, {"title": "value3", "source": "value3"}]

2

Jup, this is reasonable.

3

How would I get there effectively, without using 10 session variables and then pushing them all into one object?

4

With an array of ReactiveVar. Example how to use ReactiveVar in a template: https://github.com/meteor/meteor/pull/3561#issuecomment-117791007

5

I know about reactiveVar but I would need a two dimensional array for this. I believe that’s not possible in javascript.

6

It is possible but not necessary.

Here is how you can do the structure:

this.sources = [
  {title: new ReactiveVar(), value: new ReactiveVar()},
  {title: new ReactiveVar(), value: new ReactiveVar()},
  {title: new ReactiveVar(), value: new ReactiveVar()},
  // TODO: More sources
]

Example of access source one:

var source1 = this.sources[0]
var title = source1.title.get()
var value = source1.value.get()
7

Geat! Thanks a lot for the help! :blush:

so in my helper I have:

  allSources: function() {
    return this.sources;
  }

and in my template:

{{#each allSources}}
  <li><a href="{{value}}">{{title}}</a></li>
{{/each}}

what am I missing?

8

Here is the simplest solution http://meteorpad.com/pad/MrBeYBtfxxaxhqqw6/Article%20Sources :wink: The reactivity comes from the collection query. The rest is just data propagation.

1 Like
9

got it!
thanks a lot :slight_smile:

10

At the risk of overloading your options, I’ve got to say, why have a arbitrary limit of 10 sources? And this is something you can get for free (free as in learn autoforms and it already does it for you).

Check out: http://autoform.meteor.com/quickform, the ‘Array of object fields’ allows you to add/remove as many sources as you want and you just need to specify the schema and where to put the form.

There is quite a bit of reading to understand how it works though, in the long run it’s very much worth it as it will apply to alot of common forms.