Arranging a list of objects in Angular 6

I am facing difficulties in sorting an array of objects

The structure of the object is as follows:

https://i.sstatic.net/z5UMv.png

My goal is to sort the *ngFor loop based on the group_id property.

component.html

<ul *ngFor="let list of selectgid | groupid">
  <li>{{list}}</li>
</ul>

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'groupid'
 })
export class GroupidPipe implements PipeTransform {

transform(array: Array<any>): Array<any> {
  if (array !== undefined) {
  array.sort((a: any, b: any) => {
    if (a.group_id < b.group_id) {
      return -1;
    } else if (a.group_id > b.group_id) {
      return 1;
    } else {
      return 0;
    }
  });
}
  return array;
}
}

I have attempted to implement this code but it seems to be not working. Can anyone point out what might be wrong with my code or suggest any additional steps that need to be taken?

Answer №1

If you have an array of objects called selectgid containing the values seen in the image, one way to sort your data within the ngOnInit() method of your .ts file is as follows:

this.selectgid.sort((a, b) => {
    if (a.group_id < b.group_id) {
        return -1;
    } else if (a.group_id > b.group_id) {
        return 1;
    } else {
        return 0;
    }
})

In your .html page, make sure to specify the key of the Object like this:

<ul *ngFor="let list of selectgid">
    <li>{{list.group_id}}</li>
    <li>{{list.permission_list}}</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting Angular2 tutorial animations to work in IE11?

After successfully setting up a local development environment using the Angular2 tutorial with the quick start seed [1], I decided to experiment with animations. Following a modified version of an example from [2], my app.component.ts now toggles backgroun ...

Is there a way to implement jquery (or other external libraries) within Typescript?

Currently, I am diving into Typescript to enhance my skills and knowledge. For a project that is being served with Flask and edited in VSCode, I am looking to convert the existing JavaScript code to Typescript. The main reason for this switch is to leverag ...

Is it possible for OpenFin to store logs in a secure database and what is the process for accessing logs located at %LocalAppData%openfinapps<app>app.log

System Information Here are the details of the system setup: OpenFin Process Manager Version: RVM = 8.1.0.4 Node.js: v16.15.0 Windows 10 Angular Application with C# .NET backend Issue: The current setup saves all application logs locally on users' ...

Creating type definitions for recursive functions in TypeScript

I've created a JavaScript function that continuously accepts functions(params => string) until it receives an object, at which point it resolves the final string as a concatenation of all the functions invoked over the same object passed in at the ...

What sets property binding with methods in Angular apart from using @Output() and EventEmitter?

Consider a scenario where I have a set of parent-child components in Angular structured like this: Child component class: export class ChildComponent { @Input() addTask:any; } Child component template: <button (click)="addTask('cleaning&a ...

Testing onClick using Jest when it is not a callback function in props

I have discovered various ways to utilize mock functions in jest for spying on callback functions passed down to a component, but I have not found any information on testing a simple onClick function defined within the same component. Here is an example f ...

The FileReader's onload event handler does not seem to be triggering as expected

In short, my issue revolves around reading a csv file from an android device using JavaScript's FileReader. Although my code was functioning properly a month ago, upon revisiting it recently I discovered that the onload function no longer seems to be ...

Utilize swipe gestures in tables with Angular and Ionic for enhanced user interaction

I'm working on creating a swiping functionality for table pagination. Swiping right will take you to the next page, while swiping left will move you back to the previous page. Here's the code snippet of my table: <table #tableElement id=&qu ...

Tips on overcoming errors while attempting to create a copy of an object using Spread, especially when the object's class contains abstract methods

In the code snippet below, there is an abstract class that requires extended classes to implement a specific method. However, when utilizing the "spread" syntax, an error occurs due to the missing implementation of the abstract method. abstract class Test ...

Demonstrating a feature in a custom Angular Material dialog box

I have a reusable custom Material UI Dialog that I want to utilize to show different components. For instance, I would like to display a Login component on one occasion and a Registration component on another. However, the issue arises when I assign my com ...

Issue: Module './App' not found in webpackSolution: Check if the module path is

I've decided to switch my .js files to .tsx in order to start using TypeScript. To incorporate TypeScript, I used the following command: yarn add typescript @types/node @types/react @types/react-dom @types/jest and began converting first index.tsx fo ...

Add the item to the array and then use the *ngFor directive to iterate

Whenever the addRoom button is clicked, I want to add an object to an array. The problem is that the data in my array keeps getting repeated. Please excuse any language errors in my explanation. Feel free to ask me for clarification in the comments below. ...

Replicating an array of typed objects in Angular2

I have a collection of specific object types and I'm looking to duplicate it so that I can work on a separate version. In order for the configuratorProduct to function correctly, I need to provide it with a copy of the listProducts values: listPro ...

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips? Let's say we have an array object like: data = [ {id: "1", date: "18.08.2018"} {id: "2", date: "05.01.2014"} {id: "3", date: "01.01.2014"} {id: ...

How to use the route.navigate() method in Angular 9 to open a URL in a new tab with a query string

When a button is clicked within a table in our application, I have to open a new tab with details of a specific record from the table. Currently, the code I am using navigates to a new URL and uses resolvers to fetch data from the backend on the new page. ...

Utilizing React-hook-Form to transfer data between two SelectBoxes

This simple logic is causing me some trouble. Despite using react-hook-form, I thought this would be easy. However, after struggling with it for over a week, I'm still facing challenges. I'm incorporating nextUI components into my project. < ...

Dealing with Angular: unresolved promise error occurring with the utilization of pipe and mergemap

Recently, while working on my Angular 6 project, I came across the concepts of pipe and mergemap, which intrigued me. Essentially, I have a scenario where I need to allow the user to choose between two different CSV files stored in the assets folder. The d ...

What sets apart `this.user.id` from `this.user = {id: ....}`?

I am puzzled by the error thrown in the code below: import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user', templateUrl: './user.compone ...

Is it possible to utilize useRef to transfer a reference of an element to a child component?

When I want to mount something into the element with id tgmlviewer, I call it a viewer object. This process works smoothly when there is only one component of this kind. import React, { useEffect } from "react"; import { Viewer } from "../.. ...

Automatically upgrade packages to the latest version 12.0.0-next.0 with ng update

Recently, I've encountered an issue while updating my projects from Angular 10 to Angular 11. Whenever I run ng update, some packages are being upgraded to version 12.0.0-next.0 instead of the stable release. It seems like ng update is installing pre- ...