CODEWITHSUNDEEP
javascriptangularjspug
feners
feners

Reputation: 675

My data is displaying incorrectly. Jade and AngularJS

I've managed to query data from Twitch api, however this data is displaying randomly and incorrectly. I've been assuming this problem is due to something i have done wrong with my angular. This is my Jade html:

main(ng-app='heyTwitch')
  section(ng-controller='MainCtrl')
    header
      ul#mainMenu
        li

    ul#people(ng-repeat='user in getdata')
      li
        a(href='http://twitch.tv/{{user[0]["data"].display_name}}' target='_blank') {{user[0]["data"].display_name}}

        img(ng-src='{{user[0]["data"].logo}}' err-src='http://placehold.it/50x50').pic

This is my javascript snippet where my data is processed:

function addData(username) {
    var temp = [];
    var url = "https://api.twitch.tv/kraken/streams/" + username + "?callback=?";
    $.getJSON(url, function() {}).done(function(data) {
      if (data.stream === null) {
        url = "https://api.twitch.tv/kraken/channels/" + username + "?callback=?";
        $.getJSON(url, function(data) {
          temp.push({"username":username, "data":data,"status": false});
          count--;
          if (count === 0) {
            //temp = temp.sort();
          }
        });
      } else {
        temp.push({"username":username, "data":data,"status": false});
        count--;
        if (count === 0) {
          //temp = temp.sort();
        }
      }
      $scope.getdata.push(temp);
      $scope.getdata.sort;
      console.log($scope.getdata);
      $scope.$apply();
    })
  }

What I'm I doing wrong that my data is not displaying properly? My entire app is here : http://codepen.io/Feners4/pen/EjONEe

Upvotes: 0

Views: 46

Answers (1)

gusjap
gusjap

Reputation: 2515

First of all the repeat should be at the li element instead of the ul element:

li#people(ng-repeat='user in getdata')

This will make one ul element with many li elements instead of one ul and one li element for each player. (Note: you will have to update your css to match this.)

Secondly it's better to use a dictionary than a list for the temp object:

var temp = {};

and then set the temp values like this:

temp = {
    "username": username,
    "data": data,
    "status": false
};

Instead of:

a(href='http://twitch.tv/{{user[0]["data"].display_name}}' target='_blank') {{user[0]["data"].display_name}}

it should now look like this (the [0] removed):

a(href='http://twitch.tv/{{user.data.display_name}}' target='_blank') {{user.data.display_name}}

When you add the temp element to $scope.getdata you have to do this in the correct place. If the "streams" is null and you are making another request for the "channels", then you will have to add the temp object to the list in the response handler for the "channels" request. You can do something like this:

var app = angular.module('heyTwitch', []);
app.controller('MainCtrl', function($scope, $http) {

    var users = ["freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", "comster404", "brunofin", "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain"];

    var count = 0;
    count = users.length;

    $scope.getdata = [];

    users.map(function(user) {
        addData(user);

    })

    function addData(username) {
        var temp = {};
        var url = "https://api.twitch.tv/kraken/streams/" + username + "?callback=?";
        $.getJSON(url, function() {}).done(function(data) {
            if (data.stream === null) {
                console.log("Stream is null for " +username);
                url = "https://api.twitch.tv/kraken/channels/" + username + "?callback=?";
                $.getJSON(url, function(data) { 
                    addPlayer(username, data);
                });
            } else {
                addPlayer(username, data);
            }
        })
    }

    //Add player to list of players
    function addPlayer(username, data){
        //TODO: Check that data is valid here
        var temp = {
            "username": username,
            "data": data,
            "status": false
        };        
        $scope.getdata.push(temp);
        $scope.$apply();        
    }
})

Upvotes: 1

Related Questions