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

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

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:

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"
    }
  }
}

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

Title 1> Title 2 > Title 21

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

Title 21 > Title 2 > Title 1

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

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

Что такое comic_data? Единственный объект, который вы показали, - это dataUpdates, и это не массив, и не значения для каждого ключа в этом объекте.

— 10.01.2019 00:15

javascript html angularjs

09.01.2019 23:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 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>

10.01.2019 13:47

Другие вопросы по теме

Ng-repeat не работает, если я заполняю свой массив с помощью push

Str.link (), Невозможно прочитать ссылку свойства неопределенной ошибки

Как подкрасить изображение локальной иконки прозрачным фоном?

Почему моя временная шкала не исчезает и не появляется снова, когда я добавляю эту функцию?

Фон linear-gradient не меняется в реальном времени в элементе div

VBA: сделать скрытое поле видимым после установки переключателя

Как создать итог с помощью кнопок плюс минус и поля ввода

Невозможно прочитать свойство getState неопределенной ошибки

Как создать интервал над HTML-элементом, но только после первого?

Очистить результат с помощью insertAdjecentHTML или другого метода?

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

Ответы 1

Другие вопросы по теме

Похожие вопросы