MEAN Stack - данные Mongo на Angular дают нежелательный результат

Итак, я работал над побочным проектом, чтобы лучше познакомиться со средой MEAN, и я наткнулся на кирпичную стену, которая блокирует меня уже несколько дней.

Моя проблема заключается в следующем: когда я подсчитываю свою MongoDB, она отображается на странице без проблем. Но когда я хочу отобразить данные из моей БД в таблице с двумя столбцами, я не могу. Mongo возвращает мою базу данных в виде гигантского документа JSON. Я хочу иметь таблицу, содержащую name и total для каждого документа в коллекции mongo heroes.

Может кто-нибудь мне помочь? Я уже несколько дней рыскаю по сети и хочу хотя бы пройти этот тест.

Вот мои файлы:

-- ФРАГМЕНТ ИЗ SERVER.JS --

//Connect to MongoDB
mongoose.connect('mongodb://localhost/dota2');
var db =  mongoose.connection;
//mongoose.connect('mongodb://****:*****@ds033469.mongolab.com:33469/dota2');
db.on('error', console.error.bind(console, 'connection error...'));
db.once('open', function callback(){
    console.log("Connection to Mongo database opened");
});

var Schema = mongoose.Schema;
    var heroSchema = new Schema({
        name: String,
        initiator: Number,
        disabler: Number,
        pusher: Number,
        jungler: Number,
        nuker: Number,
        slug: String,
        lanesupport: Number,
        escape: Number,
        carry: Number,
        total: Number,
        support: Number,
        melee: Number
    }, 
    {collection: 'heroes'});

//Pulling out a piece of data and putting it into an object for Angular
var heroModel = mongoose.model('name:', heroSchema, 'heroes');


var heroData;
heroModel.find('name',{'name':'', _id:0}, function(err, herodatagrab) {
    if(err);
    heroData = herodatagrab;
});

//Show that Dota2/heroes has documents within.
var heronumber;
heroModel.count({ }, function (err, heroNumObj) {
  if (err);
  heronumber = heroNumObj;
});


//Catch-Partials
app.get('/partials/:partialPath', function(req, res) {
    res.render('partials/' + req.params.partialPath);
});


//Catch-All route
app.get('*', function(req, res){
    res.render('index', {
        heroData: heroData,
        heronumber: heronumber
    });
});

-- ИНДЕКС.ДЖЕЙД --

extends ../includes/layout
title = {title}
block main-content
    section.content
        div(ng-view)
    h3=heronumber 
        |  heroes in the database

block hero
    section.content
        div(ng-view)
    h3=heroData

--ОТОБРАЖЕНИЕ РЕЗУЛЬТАТА НА СТРАНИЦЕ--

102 героя в базе

{ имя: «Абаддон» }, { имя: «Алхимик» }, { имя: «Древнее привидение» }, { имя: «Антимаг» }, { имя: «Топор» }, { имя: «Бэйн» } ,{ name: 'Бэтрайдер' },{ name: 'Beastmaster' },{ name: 'Bloodseeker' },{ name: 'Bounty Hunter' },{ name: 'Brewmaster' },{ name: 'Bristleback' }, { имя: 'Прудмать' },{ имя: 'Centaur Warrunner' },{ имя: 'Chaos Knight' },{ имя: 'Чен' },{ имя: 'Clinkz' },{ имя: 'Clockwerk' }, { имя: 'Crystal Maiden' }, { имя: 'Dark Seer' }, { имя: 'Dazzle' }, { имя: 'Death Prophet' }, { имя: 'Disruptor' }, { имя: 'Doom' } ,{ имя: 'Dragon Knight' },{ имя: 'Drow Ranger' },{ имя: 'Earthshaker' },{ имя: 'Elder Titan' },{ имя: 'Enchantress' },{ имя: 'Enigma' },{ name: 'Faceless Void' },{ name: 'Gyrocopter' },{ name: 'Huskar' },{ name: 'Invoker' },{ name: 'IO' },{ name: 'Jakiro' } ,{ имя: 'Джаггернаут' },{ имя: 'Хранитель Света' },{ имя: 'Кунка' },{ имя: 'Лешрак' },{ имя: 'Лич' },{ имя: 'Похититель жизни' },{имя: 'Лина' },{имя: 'Лев' }, {имя: 'Lone Druid' },{ имя: 'Луна' },{ имя: 'Ликантроп' },{ имя: 'Магнус' },{ имя: 'Медуза' },{ имя: 'Мипо' },{ имя: 'Мирана' },{ имя: 'Морфлинг' },{ имя: 'Нага Сирена' },{ имя: 'Пророк Природы' },{ имя: 'Некролит' },{ имя: 'Ночной Сталкер ' },{ name: 'Nyx Assassin' },{ name: 'Ogre Magi' },{ name: 'Omniknight' },{ name: 'Outworld Devourer' },{ name: 'Phantom Assassin' },{ name: 'Phantom Lancer' },{ name: 'Puck' },{ name: 'Puck' },{ name: 'Pugna' },{ name: 'Queen of Pain' },{ name: 'Razor' },{ name : 'Рики' },{ имя: 'Рубик' },{ имя: 'Песочный король' },{ имя: 'Теневой демон' },{ имя: 'Теневой демон' },{ имя: 'Теневой шаман' }, {имя: 'Глушитель' },{ имя: 'Король скелетов' },{ имя: 'Маг Skywrath' },{ имя: 'Слардар' },{ имя: 'Сларк' },{ имя: 'Снайпер' }, { имя: 'Спектр' },{ имя: 'Духовщик' },{ имя: 'Штормовой дух' },{ имя: 'Свен' },{ имя: 'Темплар-убийца' },{ имя: 'Тайдхантер' } ,{ имя: 'Timbersaw' },{ имя: 'Tinker' },{ имя: 'Ti ny' },{ name: 'Treant Protector' },{ name: 'Troll Warlord' },{ name: 'Tusk' },{ name: 'Undying' },{ name: 'Ursa' },{ name: ' Vengeful Spirit' },{ name: 'Venomancer' },{ name: 'Viper' },{ name: 'Visage' },{ name: 'Warlock' },{ name: 'Weaver' },{ name: 'Windrunner ' },{ имя: 'Знахарь' },{ имя: 'Зевс' }

Спасибо за любую помощь, которую вы можете оказать. Это становится действительно неприятно!


person user3357628    schedule 26.02.2014    source источник
comment
Как вы делаете запрос в Angular? Вы используете $http? Как только вы получите ответ, вы устанавливаете его в переменную на вашем $scope? Как вы привязываетесь к этой переменной в своем представлении? Вы используете ng-repeat?   -  person Josh C.    schedule 27.02.2014


Ответы (2)


Вы просто визуализируете текстовое представление вашего объекта heroData.

По крайней мере, вам нужно поместить heroData в тег скрипта и использовать выражение angular для его печати. Что-то подобное:

script.
    var heroes = heroData;
    // put heroes into $scope 

div {{heroes}}
person Mr_Mig    schedule 26.02.2014

Если вы хотите использовать Angular, вы можете использовать $http или $resource для источника данных и установить конечную точку API для вывода данных.

Если вы хотите отобразить результат в нефритовом файле, вы можете использовать each ... in ... для отображения данных:

table
  tr
    th Name
    th Total
  each hero in heros
    tr
      td= hero.name
      td= hero.total
person Yishi Guo    schedule 09.08.2016