Как я могу отсортировать пользователей Reddit по карме? - PullRequest
Новая
       0

Как я могу отсортировать пользователей Reddit по карме?

0 голосов
/ 27 февраля 2019

У меня проблема с сортировкой пользователей по их карме.Ребята, пожалуйста, помогите?(сайт: здесь ) Я хочу отсортировать элементы div пользователей в соответствии с totalKarma .Также есть хороший способ обновления данных в фоновом режиме, чтобы не загружать всю страницу (например, значки пользователя). 

var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
var userskarma = [];
var usersIcon = [];

var users = ['sloth_on_meth','filiptronicek','cigarkovic','gallowboob','tooshiftyforyou','actually_crazy_irl','haxpress'];

function updateStats() {
  leaderboard.innerHTML = '';
  users.forEach(mainfunc);
}
updateStats();

function mainfunc(user) {
  $.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
      commentKarma = data.data.comment_karma;
      postKarma = data.data.link_karma;
      totalKarma = commentKarma + postKarma;
      userName = user;
      userIcon = data.data.icon_img;
      userUrl = 'https://reddit.com/u/' + userName;
      leaderboard.innerHTML +=
        "<div class='usr' id='" +
        userName +
        "'><br><br><img src='" +
        userIcon +
        "'><br><a href='" +
        userUrl +
        "'> u/" +
        userName +
        '</a><br>' +
        totalKarma.toLocaleString() +
        ' karma';

      usersloaded.push(user);
      userskarma.push(totalKarma);
      usersIcon.push(userIcon);

      // console.log(user);
      // console.log(usersIcon);
      userskarma.sort(function(a, b) {
        return a - b;
      });
      
      // console.log(userskarma);
    })
    .done(function() {
      return;
    })
    .fail(function() {
      console.log('error loading ' + user);
    })
    .always(function() {
      // console.log('completed loading ' + user);
    });
}
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  margin: 0;
  padding: 0;
}

.usr {
  width: 150px;
  height: 35px;
  padding: 4.5em;
  padding-bottom: 250px;
}

#leaderboard {
  width: 95%;
  height: 35px;
  padding: 0.5em;
}

#leaderboard>div {
  float: left;
}

img {
  border-radius: 10px;
}

a {
  text-decoration: none;
  color: #ff4500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="leaderboard">
  </div>
</body>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Ваш код не пытается переставить div, он просто добавляется к телу при возврате запросов.На высоком уровне вам нужно создать массив объектов, отсортировать их и распечатать их после того, как они будут отсортированы.

Обратите внимание, что я внес минимальные изменения в ваш код, чтобы он работал, но вы бы выигралииз обзора кода 

var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
var userskarma = [];
var usersIcon = [];
users = [
  'sloth_on_meth',
  'filiptronicek',
  'cigarkovic',
  'gallowboob',
  'tooshiftyforyou',
  'actually_crazy_irl',
  'haxpress'
];

var userObjs = [];

function updateStats() {
  leaderboard.innerHTML = '';
  users.forEach(mainfunc);
}
updateStats();

function mainfunc(user) {
  $.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
      commentKarma = data.data.comment_karma;
      postKarma = data.data.link_karma;
      totalKarma = commentKarma + postKarma;
      userName = user;
      userIcon = data.data.icon_img;
      userUrl = 'https://reddit.com/u/' + userName;
      userObjs.push({
        commentKarma,
        postKarma,
        totalKarma,
        userName,
        userIcon,
        userUrl
      });
      if (userObjs.length == users.length) {
        userObjs.sort((a, b) => a.totalKarma - b.totalKarma);
        leaderboard.innerHTML = userObjs.map(user => {
          return "<div class='usr' id='" +
            user.userName +
            "'><br><br><img src='" +
            user.userIcon +
            "'><br><a href='" +
            user.userUrl +
            "'> u/" +
            user.userName +
            '</a><br>' +
            user.totalKarma.toLocaleString() +
            ' karma';

        }).join("");

      }

      leaderboard.innerHTML +=
        "<div class='usr' id='" +
        userName +
        "'><br><br><img src='" +
        userIcon +
        "'><br><a href='" +
        userUrl +
        "'> u/" +
        userName +
        '</a><br>' +
        totalKarma.toLocaleString() +
        ' karma';

      usersloaded.push(user);
      userskarma.push(totalKarma);
      usersIcon.push(userIcon);

      console.log(user);
      console.log(usersIcon);
      userskarma.sort(function(a, b) {
        return a - b;
      });
      console.log(userskarma);

      //setTimeout(function(){ updateStats(); }, 10000);
    })
    .done(function() {
      return;
    })
    .fail(function() {
      console.log('error loading ' + user);
    })
    .always(function() {
      console.log('completed loading ' + user);
    });
}
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
  color: white;
  font-family: Roboto;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2vh;
}

.usr {
  width: 150px;
  height: 35px;
  padding: 4.5em;
  padding-bottom: 250px;
}

#leaderboard {
  width: 95%;
  height: 35px;
  padding: 0.5em;
}

#leaderboard>div {
  float: left;
}

img {
  border-radius: 10px;
}

a {
  text-decoration: none;
  color: #ff4500;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Reddit karma</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <div id="leaderboard">

  </div>
</body>

</html>
0 голосов
/ 27 февраля 2019

Вы могли бы сделать что-то вроде этого.Создайте массив usersloaded с объектами пользователя со свойствами userName, userIcon, userUrl и т. Д.Тогда вам будет проще отсортировать объекты на основе свойства totalKarma и создать HTML-код, как вы делали раньше. 

var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];

users = [
  'sloth_on_meth',
  'filiptronicek',
  'cigarkovic',
  'gallowboob',
  'tooshiftyforyou',
  'actually_crazy_irl',
  'haxpress'
];

function updateStats() {
  leaderboard.innerHTML = '';
  users.forEach(mainfunc);
}
updateStats();

function mainfunc(user) {
  $.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
      commentKarma = data.data.comment_karma;
      postKarma = data.data.link_karma;
      totalKarma = commentKarma + postKarma;
      userName = user;
      userIcon = data.data.icon_img;
      userUrl = 'https://reddit.com/u/' + userName;

      usersloaded.push({
        user,
        userName,
        userIcon,
        userUrl,
        totalKarma
      });

      loadData(usersloaded);

    })
    .done(function() {
      return;
    })
    .fail(function() {
      console.log('error loading ' + user);
    })
    .always(function() {
      //console.log('completed loading ' + user);
    });
}

function loadData(usersloaded) {
  leaderboard.innerHTML = ''
  usersloaded.sort((a, b) => a.totalKarma - b.totalKarma)
    .forEach(u => {
      leaderboard.innerHTML +=
        "<div class='usr' id='" +
        u.userName +
        "'><br><br><img src='" +
        u.userIcon +
        "'><br><a href='" +
        u.userUrl +
        "'> u/" +
        u.userName +
        '</a><br>' +
        u.totalKarma.toLocaleString() +
        ' karma';
    })
}
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  margin: 0;
  padding: 0;
}

.usr {
  width: 150px;
  height: 35px;
  padding: 4.5em;
  padding-bottom: 250px;
}

#leaderboard {
  width: 95%;
  height: 35px;
  padding: 0.5em;
}

#leaderboard>div {
  float: left;
}

img {
  border-radius: 10px;
}

a {
  text-decoration: none;
  color: #ff4500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="leaderboard">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...