how to display each item of a json in Meteor js?

Question

I want to be able to use the each helper on this json but I cant get the children arrays to display. I've tried everything but nothing works. I'm new to this but its just frustrating to be stuck on this part

html

<head>
  <title>tally</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}

    {{#each artist }}
        <h2>{{ name }}</h2>
        <h3>{{ proDate }}</h3>

    <b>Songs</b>: {{#each video}}
                    {{songs}}

                    {{/each}}



    {{/each}}


</body>

javascript

    if (Meteor.isClient) {
    Template.body.helpers({
        artist: [
            {
                "name": "El Alfa",
                "proDate": 2008,
                "albums": 0,
                video: [{
                    "song": "Muevete Jevi",
                    "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs"

                }]
            }]
    });
}

iamhimadri · Accepted Answer · 2015-07-18 18:00:36Z

In meteor helper is associated with a template. In your question there is no template in the html. So, i was a bit confused about that. You can refer to official documentation of meteor. I am also new in meteor technology. So far i used helper in two ways:

helper for specific template.
helper for all template.

For better understanding:

html

<template name="myTemplate">
    {{#each artist}}
        <h3>Name : {{name}}</h3>
        <h4>proDate{{proDate}}</h4>
        <h4>{{albums}}</h4>
        Songs:
        <ul>
            {{#each video}}
                <li>{{song}} - {{youtube}}</li>
            {{/each}}
        </ul>
        <hr>
    {{/each}}
</template>

js (heplers for specific template)

Template.myTemplate.helpers({
    artist : function(){
        return [
        {
            "name": "El Alfa 1",
            "proDate": 2007,
            "albums": 0,
            video: [{
                    "song": "Muevete Jevi 11",
                    "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/11"
                },
                {
                    "song": "Muevete Jevi 12",
                    "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/12"

                }
            ]
        },
        {
            "name": "El Alfa 2",
            "proDate": 2008,
            "albums": 1,
            video: [{
                "song": "Muevete Jevi 21",
                "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/21"

            },
            {
                 "song": "Muevete Jevi 22",
                 "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/22"

            }]
        }]
     }
});

OR we can write helpers for all the template. i.e.

Template.registerHelper("artist", function () {
    return [...] // same JSON as above
});

Please feel free ask any doubt in comments.

Cheers. :)

Now my second question is if I wanted to target the first "el alfa 1" and i just wanted to display song #2. how would i do this? {{ artist.video[2] }}

Tomas Hromnik · Accepted Answer · 2015-07-18 17:36:58Z

0

For the JSON structure you defined it should look like this:

{{#each artist }}
    <h2>{{name}}</h2>
    <h3>{{proDate}}</h3>

    <b>Songs</b>: 
    {{#each video}}
        <p>
            Song: {{song}}
            Link: {{youtube}}
        </p>
    {{/each}}

{{/each}}

answered Jul 18, 2015 at 17:36

Tomas Hromnik

2,20013 silver badges21 bronze badges

Comments

Sergio Tapia · Accepted Answer · 2015-07-18 18:05:11Z

You're calling songs directly and Blaze doesn't know what to do with it. Here's how you would call the songs referenced in your example:

{{#each artist}}
  <h2>{{name}}</h2>
  <h3>{{proDate}}</h3>

  <b>Songs</b>: 
  {{#each video}}
    <p>{{song}}</p>
    <p>{{youtube}}</p>
  {{/each}}
{{/each}}

If you want to use a helper, which it looks like it. You need to reference it with a > symbol.

{{> song}}

There's an awesome concise example on the official Meteor page.

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: [
      { text: "This is task 1" },
      { text: "This is task 2" },
      { text: "This is task 3" }
    ]
  });
}

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>

<template name="task">
  <li>{{text}}</li>
</template>

Collectives™ on Stack Overflow

how to display each item of a json in Meteor js?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related