Can't replicate the accounts table for friends

[cmpsoares91]

Hey Dan,

Somehow I'm unable to populate the accounts table in a friends list.

I'm using the following functions:

// Fill table with data
 function populateTable() {

   // Empty content strings
   var tableContent        = '';

   // Population the Friends List
   // jQuery AJAX call for JSON
   $.getJSON( '/friends/list', function( data ) {
     // Stick our user data array into a userlist variable in the global object
     userListData = data;

     // For each item in our JSON, add a table row and cells to the content string
     for (i in userListData) {
       tableContent += '<tr>';
       tableContent += '<td><a href="#" class="linkshowuser btn btn-info btn-xs"" rel="' + userListData[i].email + '" title="Show Details">' + userListData[i].profile.name + '</td>';
       tableContent += '<td><a href="mailto:' + userListData[i].email + '">' + userListData[i].email + '</a></td>';
       tableContent += '<td>' + moment(userListData[i].activity.date_established).format('MMMM Do YYYY') + '</td>';
       tableContent += '<td>' + moment(userListData[i].activity.last_logon).fromNow() + '</td>';
       tableContent += '<td><a href="#" class="linkdeleteuser btn btn-danger btn-xs" rel="' + userListData[i].email + '">Danger!</a></td>';
     }
      // Inject the whole content string into our existing HTML table
     $('#userList table tbody').html(tableContent);
   });
 };

And the script from the controller:

 /**
   * GET /friends/friends/list
   * JSON friend list API
   */

app.get('/friends/list', passportConf.isAuthenticated, function (req, res) {
  var temp = [];

  for (var i = 0; i < req.user.friends.length; i++) {
    if (req.user.friends[i].verified) {
      console.log(req.user.friends[i].email);
      temp.push(req.user.friends[i].email);
    }
 }

  User.find({ email: { $in : temp } }, function(err, users) {
    res.json(users);
  });
});

Output if I got to the link in the browser:

 [{"__v":1,"_id":"53c86afd8e7f5b9820f4c058","email":"test1@quantbull.com","password":"$2a$05$UjbqvjAHVG54gg2tcwZCA.eEEQQMCpuqnNRPxFvoKCU8NEYl5ffTW","friends":[{"friendId":"53c2cde1465a1d44214444dc","email":"cmpsoares91@gmail.com","name":"Carlos Soares","gender":"male","_id":"53c98ddf5328c93957bcc9ac","verified":true}],"enhancedSecurity":{"enabled":false},"verified":true,"activity":{"last_logon":"2014-07-18T21:12:32.606Z","date_established":"2014-07-18T00:31:57.587Z"},"profile":{"phone":{"mobile":"","home":"","work":""},"picture":"","website":"","location":"","gender":"","name":"experiencia1"},"tokens":[],"type":"user"}]

And I get [ ] when I enter console.log()userListData); in the chrome dev tools console. I don't understand why. Any ideas? I'm not very familiar with web design debugging...

P.S. It's hosted at beta.quantbull.com if you want to live test it?

[dstroot]

Couple things -

1) You API route isn't returning anything:

http://beta.quantbull.com/workspace/friends/list returns an empty array:

and http://beta.quantbull.com/friends/list returns a 404

app.get('/friends/list', passportConf.isAuthenticated, function (req, res) {

  var temp = [];

  for (var i = 0; i < req.user.friends.length; i++) {
    if (req.user.friends[i].verified) {
      console.log(req.user.friends[i].email);
      temp.push(req.user.friends[i].email);
    }
   }

// This will return your JSON output when it's working properly!
// Test this well...
  User.find({ email: { $in : temp } }, function(err, users) {
    res.json(users);
  });
});

Get this working properly first - then work on consuming the JSON in your page.

[cmpsoares91]

It doesn't give anything because you hadn't any friend connections, I've added manually a friend connection, so if you check again it should work.

Are you getting the same result as me?

_Update:_ I found the source of the problem but can't figure out why it works in accounts.jade but not in friends.jade:

// Load moment.js
$.getScript('lib/moment/min/moment.min.js')
.done(function(script, textStatus) {
  alert('getScripts are done...');
  // Now populate the user table
  populateTable();
});

[cmpsoares91]

Both getScripts()'s look exactly the same but somehow in accounts.jade it looks for localhost:8080/lib/moment/min/moment.min.js and in friends.jade it looks for localhost:8080/friends/lib/moment/min/moment.min.js.

Any idea why?

[cmpsoares91]

Well, I hacked it and changed the link from 'lib/moment/min/moment.min.js' to '../lib/moment/min/moment.min.js' and it works... I think I'm getting the hang of it...

[dstroot]

Glad you found it! You are seeing some strange stuff... ;(

[cmpsoares91]

Hehe! How do you mean?