Extracting photos from FB-graph with Meteor

Question

I'm trying to display photos from the NPM FB-Graph (https://npmjs.org/package/fbgraph) package by following this example (http://www.andrehonsberg.com/article/facebook-graph-api-meteor-js). I've managed to connect the API and render data, however I'm having trouble extracting the EJSON data into my picture template.

First off, let me show you the code I'm working with. Here is my client code:

  function Facebook(accessToken) {
    this.fb = Meteor.require('fbgraph');
    this.accessToken = accessToken;
    this.fb.setAccessToken(this.accessToken);
    this.options = {
        timeout: 3000,
        pool: {maxSockets: Infinity},
        headers: {connection: "keep-alive"}
    }
    this.fb.setOptions(this.options);
}

Facebook.prototype.query = function(query, method) {
    var self = this;
    var method = (typeof method === 'undefined') ? 'get' : method;
    var data = Meteor.sync(function(done) {
        self.fb[method](query, function(err, res) {
            done(null, res);
        });
    });
    return data.result;
}

Facebook.prototype.getUserData = function() {
    return this.query('me');
}
Facebook.prototype.getPhotos = function() {
    return this.query('/me/photos?fields=picture');
}

Meteor.methods({
    getUserData: function() {
        var fb = new Facebook(Meteor.user().services.facebook.accessToken);
        var data = fb.getPhotos();
        return data;
     }
});

Meteor.methods({
    getPhotos: function() {   
    var fb = new Facebook(Meteor.user().services.facebook.accessToken);
    var photos = fb.getPhotos;
    return photos;
}
}); 

Here is my client code:

Template.fbgraph.events({
    'click #btn-user-data': function(e) {
        Meteor.call('getUserData', function(err, data) {
            $('#result').text(JSON.stringify(data, undefined, 4));            
         });
    }
});

var fbPhotos = [];

Template.fbgraph.events({
    fbPhotos : function(e) {
        Meteor.call('getUserData', function(err, data) {
            $('input[name=fbPhotos]').text(EJSON.stringify(data, undefined, 4));            
         });
    }
});

Template.facebookphoto.helpers({ 
  pictures: fbPhotos
});

And here are my templates:

<template name="fbgraph">
    <div id="main" class="row-fluid">
      {{> facebookphoto}}
    </div>

    <button class="btn" id="btn-user-data">Get User Data</button>
    <div class="well">
        <pre id="result"></pre>
    </div>
</template>


<template name="facebookphoto">
  <div class="photos">
    {{#each pictures}}
      {{> photoItem}}
    {{/each}}
  </div>
</template>

<template name="photoItem">
  <div class="photo">
    <div class="photo-content">
      <img class="img-rounded" src="{{picture}}">
    </div>
  </div>
</template>

Right now, I'm testing the data with the id="results" tag and the Facebook API returns data as below.

{
    "data": [
        {
            "picture": "https://photo.jpg",
            "id": "1234",
            "created_time": "2013-01-01T00:00:00+0000"
        },
        {
            "picture": "https://photo.jpg",
            "id": "12345",
            "created_time": "2013-01-01T00:00:00+0000"
        }
}

However I'm having difficulty pulling each of the pictures out of the EJSON and render them in templates. What I'd like to do is to display each picture in the {{picture}} template. I believe the problem with the code is somewhere in the client, but I'm not sure how to fix it.

Thanks in advance!

Answer 1

It looks like in your client code you have

Template.fbgraph.events({ ... })

defined twice. Did you mean to write:

Template.fbgraph.helpers({
    fbPhotos : function(e) {
        Meteor.call('getUserData', function(err, data) {
            $('input[name=fbPhotos]').text(EJSON.stringify(data, undefined, 4));            
         });
    }
});

A simpler way to do it might just be to call the getUserData method in your facebookphoto template itself, thus:

Template.facebookphoto.helpers({
        pictures : function(e) {
            Meteor.call('getUserData', function(err, data) {
                $('input[name=fbPhotos]').text(EJSON.stringify(data, undefined, 4));            
             });
        }
});