Tips for troubleshooting JSON sorting in Angular

I am currently troubleshooting column positions within my application and need to inspect the sorted column definition. After retrieving the column definition from my API, I proceed to sort them. However, I also want to log the sorted list/Array to my console for verification purposes. Where can I locate and access the sorted list in the code snippet below?

fetchColumnsAgGrid(guid: string): Observable<IGridColumnAgGrid[]> {
        return this.api.get({endpoint: `/sample/getgrid/${guid}`, useAuthUrl: false})
            .pipe(
                map((res: any) => {
                    console.log(res)
                    return res.Data && res.Data.map((column) => {
                        return GridColumnsService.adaptAgGridColumn(column);
                    }).sort((a, b) => {
                        if (a.position < b.position) {
                            return -1;
                        }
                        if (a.position > b.position) {
                            return 1;
                        }
                        return 0;
                    });
                }),
            );
    }

Answer №1

Once your map sort is completed, you can insert tap.

fetchColumnsAgGrid(guid: string): Observable<IGridColumnAgGrid[]> {
        return this.api.get({endpoint: `/sample/getgrid/${guid}`, useAuthUrl: false})
            .pipe(
                map((res: any) => {
                    console.log(res)
                    return res.Data && res.Data.map((column) => {
                        return GridColumnsService.adaptAgGridColumn(column);
                    }).sort((a, b) => {
                        if (a.position < b.position) {
                            return -1;
                        }
                        if (a.position > b.position) {
                            return 1;
                        }
                        return 0;
                    });
                }),
                //Place tap here
                tap((res: any) => console.log(res))
            );
    }

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

Guide to showcasing a stomp client's message in the view without having to refresh the page when a new message is delivered

I'm in the process of setting up a chatroom with Angular and web-socket. I want to update the view with new messages from the socket without having to refresh the page. The message is appearing in the log console but not on the page. Any suggestions w ...

Angular: Utilizing property interpolation from fetched JSON

As I attempt to create a test questionnaire using a json response, I encounter errors in the console stating 'Cannot read property 'Title' of undefined'. It seems like the string interpolation is trying to occur before receiving the res ...

Enhancing Angular Material: requiring more user engagement for rendering to occur

Encountering an unusual issue with Angular Material: certain components require an additional event, like a click or mouse movement on the targeted div, to trigger the actual rendering process. For instance, when loading new rows in mat-table, some empty ...

Angular 8: Syncing Component Values with Service Updates

My Angular 8 project features two sibling components that utilize a service to manage restaurant data. One component displays a list of restaurants fetched from an api, while the other component filters the displayed restaurants based on user input. Despit ...

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

The combination of Material UI and React Hook Form is encountering an issue with submitting disabled checkboxes

My current challenge involves ensuring that all fields are disabled while the form is submitting. I have successfully implemented this for text, selects, and radios, but I am facing difficulties with required checkboxes. I am working with nextjs typescrip ...

Sharing data between components in Angular 2 using the <router-outlet> technique

Having just started exploring Angular 2, I am eager to pass a boolean value from one component to another using <router-outlet> After some research, it seems like the best approach is to utilize a service. My aim is to toggle a boolean variable in ...

In my current project, I am working with Knockout and TypeScript but I am encountering difficulties in firing the window-resize event

Instead of using jquery, I prefer working with a custom handler for the $(window).resize(function () { ... event. If there is a way to achieve this without relying on jquery, please feel free to share it in the comments below. The code snippet below show ...

What could be causing the vue-property-decorator @Emit to malfunction in my Vue TypeScript file?

I am currently working with Typescript and Vuejs, where I have a child component called child.component.tsx import Vue from 'vue'; import Component from 'vue-class-component'; import { Emit } from 'vue-property-decorator'; ...

Attempting to adhere to the prescribed Cypress tutorial is resulting in various errors related to being "compiled under '--isolatedModules'"

I am new to using Cypress and I have been following the helpful tutorial on testing your first application. However, I have encountered some compiler issues in the third section. Following the instructions, I created a custom command but I am receiving th ...

Leveraging the Image data type in SQL Server to showcase images in an Angular 2.0 environment, with the response handled by Express

I am receiving the following response from Express and I am looking to display the supertendentsSignature image in Angular 2. Database: SQL Server Dataytpe : Image ORM: Sequelize Datatype of SuperintendentsSignature column is Blob Framework : Express Fro ...

Customize the file name for exporting data from a Syncfusion grid view with Angular

In my Angular (v6.8) application, I have implemented a Syncfusion grid view from Syncfusion. When downloading the grid content as an Excel sheet, the default file name displayed is "Export.xlsx". I am trying to set a custom file name for the download proce ...

Steps for managing files in Ionic Native: creating, reading, and writing them

Struggling to find proper examples for file operations like creating, reading, and writing text or logs into a file? I've done a lot of research but haven't stumbled upon any suitable solutions. The examples provided in this link seem helpful, ho ...

Best Practices for Error Handling in Typescript

After delving into articles about error handling, a thought lingers in my mind - is throwing an exception on validation logic in the value object really the most efficient approach? Take for example this class that represents a value object: export class U ...

What allows mapped types to yield primitive outputs when using {[P in keyof T]}?

Check out this innovative mapped type example that utilizes the power of keyof: type Identity<T> = { [P in keyof T]: T[P]; }; Have you ever wondered why Identity<number> results in the primitive number type, rather than an object type? Is th ...

Preventing image flickering in SvelteKit: A guide

Upon the initial loading of a website, you may notice that the images tend to flicker or flash when transitioning between them. However, once these images are stored in the browser's cache, subsequent visits to the site will display the images seamles ...

Is there a way to modify the id parameter in the URL using Angular 2's ActivatedRoute?

How can I modify a parameter in the URL without altering the overall address? https://i.stack.imgur.com/LOd4T.png This is the TypeScript code that I currently have: onRowClicked(event: any) { let currentIdPerson = event.data.IdPerson; } I am trying ...

Creating Dynamic ion-card Elements in Typescript by Programmatically Changing Values

Currently, I am working on a basic app that retrieves posts from the server and displays them as cards on the screen. At this early stage, one of my main challenges is figuring out how to dynamically add ion-card elements with changing content and headers ...

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

An issue occurred when clicking on a line due to the filter

Issue at Hand: Currently, I am facing a problem where selecting an item from the list by clicking on the button leads me to access the information of a different item when the filter is applied. Desired Outcome: I wish to be able to access the correct inf ...