Ошибка с коллекцией массивов объектов OrderBy Angular Js

Question

Ошибка в HTML> Angular говорит, что не может упорядочить, потому что это не массив.

HTML:

    <div class="container" ng-app="myApp" ng-controller="myCtrl2">
    <form>
      Escoje una Opción:
      <input type="radio" ng-model="myOption" value="Ultimas Actualizaciones" />Updates
      <input type="radio" ng-model="myOption" value="Populares de Siempre" />Populares de Siempre
    </form>
    <div>
      <div>
          <h3>{{myOption}}</h3>
          <div>
            <div class="frame" id="basic" >
              <ul class="clearfix" id="clearfixUpdate">
                <li style="font-size:02rem" ng-repeat="comic in comic_data[myOption]">
                   <a ng-href="{{comic.link}}">
                    <img width="162" height="225" alt="{{comic.titulo}}" src="{{comic.imagen}}" />
                    <span  class="titleUp">{{comic.titulo}}</span>
                  </a>
                </li>
              </ul>
            </div>
          <ul class="pages"></ul>
          </div>
      </div>
  </div>


</div>

Пример коллекции объектов JS Array:

var dataUpdates = {
  "Ultimas Actualizaciones": {
    "21": {
      "imagen": "imagen.jpg",
      "link": "https://.html",
      "titulo": "Title 21"
    },
    "1": {
      "imagen": "imagen.jpg",
      "link": "https://.html",
      "titulo": "Title 1"
    },
    "2": {
      "imagen": "imagen.jpg",
      "link": "https://.html",
      "titulo": "Title 2"
    }
  },
  "Populares de Siempre": {
    "0": {
      "titulo": "Title 0",
      "imagen": "imagen.jpg",
      "link": "https://.html"
    },
    "1": {
      "titulo": "Title 1",
      "imagen": "imagen.jpg",
      "link": "https://.html"
    }
  }
}

В настоящее время вывод выглядит примерно так:

Заголовок 1> Заголовок 2> Заголовок 21

Но это поведение, которое я хочу создать:

Заголовок 21> Заголовок 2> Заголовок 1

Используя OrderBy '-' или Orderby: 0: true, чтобы установить обратное, я получаю ту же ошибку, isNotArray

ng-repeat = "comic in comic_data [myOption] | orderBy: '-'

Answer 1

Вы можете определить пользовательский фильтр и использовать его вместо orderBy. В фильтре вы можете получить все ключи объекта, отсортировать их в обратном порядке и вернуть массив по элементам в том порядке, в котором необходимо отобразить, реализация фильтра может выглядеть следующим образом:

app.filter('objectSortReverse', function () {
    return function (input) {
       return Object.keys(input)
          .map(key => parseInt(key, 10))
          .sort((a, b) => b - a)
          .map(key => input[String(key)]);
    };
});

---

Вот небольшая демонстрация, основанная на коде, которым вы поделились, который должен продемонстрировать идею:

var app = angular.module('demo', []);

app.controller('myCtrl2', function ($scope) {
  $scope.myOption = 'Ultimas Actualizaciones';
  $scope.comic_data = {
    "Ultimas Actualizaciones": {
      "21": {
        "imagen": "imagen.jpg",
        "link": "https://.html",
        "titulo": "Title 21"
      },
      "1": {
        "imagen": "imagen.jpg",
        "link": "https://.html",
        "titulo": "Title 1"
      },
      "2": {
        "imagen": "imagen.jpg",
        "link": "https://.html",
        "titulo": "Title 2"
      }
    },
    "Populares de Siempre": {
      "0": {
        "titulo": "Title 0",
        "imagen": "imagen.jpg",
        "link": "https://.html"
      },
      "1": {
        "titulo": "Title 1",
        "imagen": "imagen.jpg",
        "link": "https://.html"
      }
    }
  }    
});
app.filter('objectSortReverse', function () {
    return function (input) {
       return Object.keys(input)
          .map(key => parseInt(key, 10))
          .sort((a, b) => b - a)
          .map(key => input[String(key)]);
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="container" ng-app="demo" ng-controller="myCtrl2">
    <form>
      Escoje una Opción:
      <input type="radio" ng-model="myOption" value="Ultimas Actualizaciones" />Updates
      <input type="radio" ng-model="myOption" value="Populares de Siempre" />Populares de Siempre
    </form>
    <div>
      <div>
          <h3>{{myOption}}</h3>
          <div>
            <div class="frame" id="basic" >
              <ul class="clearfix" id="clearfixUpdate">
                <li style="font-size:01rem" ng-repeat="comic in comic_data[myOption] | objectSortReverse">
                   <a ng-href="{{comic.link}}">
                    <img width="162" height="225" alt="{{comic.titulo}}" src="{{comic.imagen}}" />
                    <span  class="titleUp">{{comic.titulo}}</span>
                  </a>
                </li>
              </ul>
            </div>
          <ul class="pages"></ul>
          </div>
      </div>
  </div>


</div>