Как получить длину массива без ngRepeat

Question

Как получить длину массива без ngRepeat

0

Я пытаюсь подсчитать элементы в массиве без использования ng-repeat (мне это действительно не нужно, я просто хочу распечатать сумму).

Это то, что я сделал до сих пор: http://codepen.io/nickimola/pen/zqwOMN?editors=1010

HTML:

<body ng-app="myApp" ng-controller="myCtrl">
    <h1>Test</h1> 
    <div ng-cloak>{{totalErrors()}}</div>
</body>

Javascript:

angular.module('myApp', []).controller('myCtrl', ['$scope', '$timeout', function($scope) {

    $scope.tiles= {
            'data':[
                {'issues':[
                    {'name':'Test','errors':[
                        {'id':1,'level':2},
                        {'id':3,'level':1},
                        {'id':5,'level':1},
                        {'id':5,'level':1}
                    ]},
                    {'name':'Test','errors':[
                        {'id':1,'level':2,'details':{}},
                        {'id':5,'level':1}
                    ]}
                ]}
            ]}
  $scope.totalErrors = function() {
  if ($scope.tiles){
        var topLevel = $scope.tiles.data
        console.log (topLevel);
   return topLevel[0].issues.map(function(o) {
            return o.errors.length
          })
          .reduce(function (prev, curr){
            return prev + curr
          })
    }
    }
}]);

Этот код работает на codepen, но в моем приложении я получаю эту ошибку:

Невозможно прочитать свойство "0" неопределенного

и если я его отлаживаю, topLevel не определено при вызове функций.

Я думаю, что это связано с загрузкой данных, так как на моем приложении у меня есть служба, которая выглядит так:

angular.module('services', ['ngResource']).factory('tilesData', [
  '$http', '$stateParams', function($http, $stateParams) {
    var tilesData;
    tilesData = function(myData) {
      if (myData) {
        return this.setData(myData);
      }
    };
    tilesData.prototype = {
      setData: function(myData) {
        return angular.extend(this, myData);
      },
      load: function(id) {
        var scope;
        scope = this;
        return $http.get('default-system.json').success(function(myData) {
          return scope.setData(myData.data);
        }).error(function(err) {
          return console.error(err);
        });
      }
    };
    return tilesData;
  }
]);

и я загружаю данные, подобные этому в моем контроллере:

angular.module('myController', ['services', 'ionic']).controller('uiSettings', [
  '$scope', '$ionicPopup', '$ionicModal', 'tilesData', function($scope, $ionicPopup, $ionicModal, tilesData) {
    $scope.tiles = new tilesData();
    $scope.tiles.load();
    $scope.totalErrors = function() {
      debugger;
      var topLevel;
      topLevel = $scope.tiles.data;
      console.log(topLevel);
      return topLevel[0].issues.map(function(o) {
        return o.errors.length;
      }).reduce(function(prev, curr) {
        return prev + curr;
      });
    };
  }
]);

но я не знаю, что делать, чтобы решить эту проблему. Любая помощь будет действительно оценена. большое спасибо

Nick 22 март 2016, в 16:58

Источник

0

В сервисе загрузите функцию: return scope.setData(myData); ,
Shaohao Lin 22 март 2016, в 15:34
0

Похоже, вы исправили, это .... переход к codepen показывает 6 на странице.
Raul A. 22 март 2016, в 15:36
0

Пожалуйста, рассмотрите возможность размещения всего кода контроллера из вашего приложения.
Shaohao Lin 22 март 2016, в 15:38
0

@RaulA. Codepen работает, так как данные уже есть. в моем приложении он загружается через $ http и кажется, что его все еще нет, когда мне это нужно
Nick 22 март 2016, в 15:39
0

@ShaohaoLin, пожалуйста, проверьте мой отредактированный вопрос
Nick 22 март 2016, в 15:42
0

Вы можете получить данные? Можете ли вы console.log($scope.tiles.data;) ?
Shaohao Lin 22 март 2016, в 15:47
1

Вы используете $ http.get в своей функции загрузки, которая является асинхронной. Вам нужно будет вернуть обещание из вашей функции загрузки и использовать ту же нотацию .then (), которую вы использовали в качестве ответа от $ http.get в вашем контроллере. посмотрите здесь: docs.angularjs.org/api/ng/service/$q
dafyddPrys 22 март 2016, в 15:50
0

да, есть данные, так как я использую много повторителей в HTML, и все выглядит хорошо. Я действительно не могу напечатать tile.data, так как часть .data находится в моем сервисе: return $ http.get ('default-system.json'). Success (function (myData) {return scope.setData (myData.data);
Nick 22 март 2016, в 15:50
0

Является ли topLevel объектом или массивом? Что будет лучше, если вы попробуете console.log(topLevel[0]); ?
Shaohao Lin 22 март 2016, в 15:53
0

в моем приложении не определено, так что я не знаю, но на коде есть массив, вы также можете увидеть его. Но этот код работает. Я думаю, что @Jingo прав, и мне, вероятно, нужно использовать обещания, но я не знаю, как, и некоторая помощь будет очень признательна.
Nick 22 март 2016, в 15:54
0

Я чувствую, что вы можете return topLevel.issues.map(function(o) { ...} без 0 .
Shaohao Lin 22 март 2016, в 15:55
0

Я полагаю, что это больше касается проблемы структуры данных, потому что вы сказали мне, что можете сделать console.log($scope.tiles.data); , Следовательно, это не будет асинхронной проблемой. Это означает, что вы получаете данные от сервиса к контроллеру.
Shaohao Lin 22 март 2016, в 15:58
0

Это именно то, что я делаю. Я загружаю данные из сервиса в контроллер асинхронным способом. Мне не нужны обещания, и я не знаю, как это сделать.
Nick 22 март 2016, в 16:04

Показать ещё 11 комментариев

Теги:

angularjs

angularjs-scope

angularjs-http

1 ответ

Ещё вопросы

В сервисе загрузите функцию: return scope.setData(myData); ,
Похоже, вы исправили, это .... переход к codepen показывает 6 на странице.
Пожалуйста, рассмотрите возможность размещения всего кода контроллера из вашего приложения.
@RaulA. Codepen работает, так как данные уже есть. в моем приложении он загружается через $ http и кажется, что его все еще нет, когда мне это нужно
@ShaohaoLin, пожалуйста, проверьте мой отредактированный вопрос
Вы можете получить данные? Можете ли вы console.log($scope.tiles.data;) ?
Вы используете $ http.get в своей функции загрузки, которая является асинхронной. Вам нужно будет вернуть обещание из вашей функции загрузки и использовать ту же нотацию .then (), которую вы использовали в качестве ответа от $ http.get в вашем контроллере. посмотрите здесь: docs.angularjs.org/api/ng/service/$q
да, есть данные, так как я использую много повторителей в HTML, и все выглядит хорошо. Я действительно не могу напечатать tile.data, так как часть .data находится в моем сервисе: return $ http.get ('default-system.json'). Success (function (myData) {return scope.setData (myData.data);
Является ли topLevel объектом или массивом? Что будет лучше, если вы попробуете console.log(topLevel[0]); ?
в моем приложении не определено, так что я не знаю, но на коде есть массив, вы также можете увидеть его. Но этот код работает. Я думаю, что @Jingo прав, и мне, вероятно, нужно использовать обещания, но я не знаю, как, и некоторая помощь будет очень признательна.
Я чувствую, что вы можете return topLevel.issues.map(function(o) { ...} без 0 .
Я полагаю, что это больше касается проблемы структуры данных, потому что вы сказали мне, что можете сделать console.log($scope.tiles.data); , Следовательно, это не будет асинхронной проблемой. Это означает, что вы получаете данные от сервиса к контроллеру.
Это именно то, что я делаю. Я загружаю данные из сервиса в контроллер асинхронным способом. Мне не нужны обещания, и я не знаю, как это сделать.

dafyddPrys · Accepted Answer · 2016-03-22T15-00-00.000Z

Метод $http.get() является асинхронным, поэтому вы можете справиться с этим в своем контроллере с обратным вызовом или обещанием. У меня есть пример с обещанием.

Я сделал примерное перо, которое передает асинхронно образцы данных, которые вы используете выше. Это издевается над $http.get вы делаете.

Я обработал асинхронный вызов в контроллере несколько иначе, чем вы сделали, но таким образом он работает с шаблоном .then(), который обещает использовать. Это должно дать вам пример того, как вы можете обрабатывать асинхронный код в своем контроллере.

Обратите также внимание на то, что моя служба находится в том же модуле, что и мой контроллер. Это не должно иметь значения и то, как вы это делали, вводя ваш заводский модуль в ваш основной модуль в порядке.

angular.module('myApp', [])

//Define your controller
.controller('myCtrl', ['$scope','myFactory', function($scope,myFactory) {        
    //call async function from service, with .then pattern:
    myFactory.myFunction().then(
    function(data){
        // Call function that does your map reduce
        $scope.totalErrors = setTotalErrors();
    },
    function(error){
        console.log(error);
    });

  function setTotalErrors () {
    if ($scope.tiles){
                var topLevel = $scope.tiles.data
                console.log (topLevel);
     return topLevel[0].issues.map(function(o) {
                        return o.errors.length
                    })
                    .reduce(function (prev, curr){
                        return prev + curr
                    });
        }
 }
}])
.factory('myFactory', ['$timeout','$q',function($timeout,$q){
return {
    myFunction : myFunction
};

function myFunction(){
    //Create deferred object with $q.
    var deferred = $q.defer();
    //mock an async call with a timeout
    $timeout(function(){
        //resolve the promise with the sample data
        deferred.resolve(
            {'data':[
            {'issues':[
                {'name':'Test','errors':[
                    {'id':1,'level':2},
                    {'id':3,'level':1},
                    {'id':5,'level':1},
                    {'id':5,'level':1}
                ]},
                {'name':'Test','errors':[
                    {'id':1,'level':2,'details':{}},
                    {'id':5,'level':1}
                ]}
            ]}
        ]})
    },200);

    //return promise object.
    return deferred.promise;
}
}]);

Посмотрите: Ссылка на codepen

Кроме того, прочитайте документацию по $ q: документация

Вы кодируете швы для работы, но я набрал неверный файл json, и теперь я снова немного застрял, не могли бы вы проверить этот код, пожалуйста? мне нужно перебрать список массивов, чтобы topLevel [0] .issues.map действительно не работал: codepen.io/nickimola/pen/zqwOMN?editors=1010
Чтобы это работало, вам нужно будет перебрать как массивы, так и массивы ошибок в массивах. Вы можете вызвать что-то похожее на вашу карту и уменьшить количество звонков внутри вашей карты.
я сделал это следующим образом: codepen.io/nickimola/pen/zqwOMN?editors=0010, но я получаю "не могу прочитать свойство '0' с нулевым значением, в то время как в консоли значение является правильным
Это перо показывает, как вы можете циклически проходить по каждому объекту, чтобы получить ошибки: codepen.io/anon/pen/BKRRJq?editors=1010 ... В вашем случае вы только перебирали объекты верхнего уровня.
Большое спасибо, ты спасатель жизни!