Loop through an array using a Meteor template

js

if (Meteor.isClient) {

  Template.body.helpers({
    fixtures: function () {
      Meteor.call("checkTwitter", function(error, results) {
        return results.data.fixtures;
      });
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
  Meteor.methods({
        checkTwitter: function () {
            this.unblock();
            var url = "http://api.football-data.org/alpha/teams/73/fixtures";
            return Meteor.http.call("GET", url);
        }
    });
}

html

<body>
  <h1>Tottenham Hotspur</h1>
  <button>Click Me</button>
  <table class="table">
    <th>
        <td>Date</td>
        <td>Home</td>
        <td>Result</td>
        <td>Away</td>
    </th>
    <tr>
        {{#each fixtures}}
        {{> fixture}}
      {{/each}}
    </tr>
  </table>
</body>

<template name="fixture">
    <td>{{date}}</td>
    <td>{{home}}</td>
    <td>{{result}}</td>
    <td>{{away}}</td>
</template>

I am having trouble displaying the list of fixtures for a football team. I have created a helper function to call the API for the fixtures and return the data as an array called 'fixtures'. However, my template is not rendering the fixtures. When I check the console, 'results.data.fixtures' returns an array of objects. Can anyone spot what I am doing incorrectly?

Do you have any suggestions on how to fix this issue?

Answer №1

Below is a functional version:

app.js

if (Meteor.isClient) {
  Template.matches.created = function() {
    this.matches = new ReactiveVar([]);

    var self = this;
    Meteor.call('getMatches', function(error, result) {
      if (result)
        self.matches.set(result);
    });
  };

  Template.matches.helpers({
    matches: function() {
      return Template.instance().matches.get();
    }
  });
}

if (Meteor.isServer) {
  Meteor.methods({
    getMatches: function() {
      var url = "http://api.football-data.org/alpha/teams/73/fixtures";
      try {
        var fixtures = HTTP.get(url).data.fixtures;
        return fixtures;
      } catch (e) {
        return [];
      }
    }
  });
}

app.html

<body>
  {{> matches}}
</body>

<template name="matches">
  <h1>Tottenham Hotspur</h1>
  <table class="table">
    <th>
      <td>Date</td>
      <td>Home</td>
      <td>Result</td>
      <td>Away</td>
    </th>
    {{#each matches}}
      <tr>
        {{> match}}
      </tr>
    {{/each}}
  </table>
</template>

<template name="match">
  <td>{{date}}</td>
  <td>{{homeTeamName}}</td>
  <td>{{result.goalsHomeTeam}}:{{result.goalsAwayTeam}}</td>
  <td>{{awayTeamName}}</td>
</template>

Points to Note

  • The fixtures array was not being parsed correctly from the HTTP result, causing unnecessary data to be sent back to the client.

  • Helpers in Meteor should be synchronous. We used a ReactiveVar to handle asynchronous data setting and reading. For more information, refer to the article on scoped reactivity.

  • The each block should be outside of the <tr> tag.

  • Ensure you have added the necessary packages by running: $ meteor add reactive-var http for the above code to function correctly.

Answer №2

Attempt sending the item retrieved from your every loop, which is typically this, to your fixture template:

{{#every fixtures}}
  {{> fixture this}}
{{/every}}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing Online Presence with Video Gallery Website Development

I'm in the process of creating a website and need help finalizing my video page. I envision a layout similar to this example: https://i.stack.imgur.com/hctui.gif The main feature should be a large video placeholder at the top, followed by several thu ...

Is there a way to create animated CSS box-shadow depth using jQuery or CSS3 transitions?

This code snippet applies delays but doesn't seem to update the style changes until the loop completes: for (i=20;i>=0;i--) { var boxShadow = i+"px "+i+"px "+i+"px #888"; $('article').css("box-shadow", boxShadow); ...

Switching from JavaScript to TypeScript resulted in React context not being located in its respective file

I previously had my context and context provider set up in a file, and everything was working perfectly. However, I recently decided to convert all of my files to TypeScript, including this one. Unfortunately, I've encountered a strange issue that I c ...

Unable to make anchor tag inside button effectively collapse another div

My Nuxt 2 SSR + Bootstrap 5 application includes the following code snippet: <button v-for="file of orderProduct.files" class="collapsed son-collapse" type="button" data-bs-toggle=&quo ...

Error in mandatory data required by the Screenleap API in JavaScript

I have a JSON encoded data stored in a variable called $json. Here is how it appears: I have referred to the documentation at "https://www.screenleap.com/api/presenter" ...

script locate the div ID within a given text and clear its content

My string contains some dynamic HTML with a div element having an id of "time", Here's an example: myString = "<div class="class">blahblah</div><div id="time">1:44</div>" How can I generate a new string that is identical to ...

Updating Values in Nested Forms with Angular Reactive Form

I have been grappling with a form setup that looks something like this: itemEntities: [ {customisable: [{food: {..}, quantity: 1}, {food: {..}, quantity: 5}]}, {customisable: [{food: {..}, quantity: 0}]}, ] My challenge lies in trying to u ...

Fetch information from the Anilist API

I'm currently working on a small Next.js application and I attempted to fetch data from an API (). My goal is to display a collection of Anime covers. In order to achieve this, I had to implement GraphQL. Initially, I wanted to display the names of s ...

Guide on utilizing fs.readStream and fs.writesream for transmitting and receiving video file (.mp4) either from server to client or vice versa using Node Js

## My Attempt to Receive and Save Video Stream in .mp4 Format ## ---------- > Setting up Server Side Code > Receiving Video stream from client and saving it as a .mp4 file var express = require('express'); var app = global.app = expor ...

Sending an HTTP POST request from an Angular 2 client to a Node.js server

I am encountering a peculiar issue with sending POST requests to my Node.js server. Although my GET listeners are functioning perfectly, when attempting to send a simple request from my Angular 2 application (port 4200) to the Node.js server (port 443), I ...

What is the process for incorporating an external script into a Vue component?

Seeking assistance urgently... I am encountering an issue with a Vue component and an endpoint that provides a script containing a small menu with actions. However, once the script is loaded, the actions do not seem to function on the page and I cannot det ...

Can we retrieve the CSS of an element?

Using Selenium's webdriverJS, I have automated tasks on an HTML5 page. To incorporate a CSS selector into a function, I had to rely on XPath for selecting elements: var complexXpath = "//*/div/a"; /* This is just an example */ var element = mydri ...

Utilize Mongoose to seamlessly integrate online shopping cart items into MongoDB

I am facing an issue while trying to insert a shopping cart of items in the form of a JSON object into a MongoDB collection using a mongoose schema. Although the customer's ID is successfully stored (extracted from the User DB), unfortunately, the ca ...

Adjust the language code in a URL using JavaScript or Node.js

Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected lang ...

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

Unable to retrieve local property when inside a Callback function in Ionic2

I am encountering an issue with my Ionic 2 app that utilizes Angular2. It is a basic problem, but it has been quite frustrating for me. Below is the component in question... import {Component} from "@angular/core"; @Component({ '<ion-content> ...

Creating a node.js function that can be used with OracleDB

I'm currently delving into learning nodeJS, but I'm facing a roadblock and can't seem to figure out what's causing the issue. Even the Debugger isn't providing much help. Any assistance or guidance would be greatly appreciated. The ...

What is the best way to handle waiting for a React context provider that requires time to initialize the value it provides?

In my Next.js application, I have a global context that takes five seconds to compute the value provided: import React, { useContext, useEffect, useState } from 'react'; const GlobalContext = React.createContext(); export const GlobalContextPro ...

Managing checkboxes using node.js and mongoose

This particular ejs file showcases a form featuring multiple checkbox inputs generated by looping through a database. Upon submission, a post request is triggered, and this request is subsequently managed by the app.post <form action="/" m ...

Activated a DOM element that was retrieved through an AJAX request and displayed it inside a light

I want to implement a lightbox plugin (specifically lightbox_me) to display a html DOM element retrieved through an ajax request. This is the code I am using: <script src="script/jquery.lightbox_me.js"></script> <script> $(& ...