Sorting an array of maps by a key in typescript?

Question

I'm attempting to sort an array of maps by a particular key/value within the maps.

Map<string, string>[]

I get back the following error,

Cannot assign to read only property '0' of object '[object Array]''

I'm trying to make heads or tails of this error but I feel like I'm not returning the correct value somewhere. I think my code looks mostly correct. I'm more concerned I may be trying to do something that is more difficult than I realize. Here is my code. I hard-coded the key for now just try and work through the problem and that key does exists. Any insight would be great. Thanks for looking.

sortGridData(data$ : Observable<Map<string, string>[]>) : Observable<Map<string, string>[]> {
        const sortedData$ = combineLatest([data$, this.sort$]).pipe(
            map(([data, sort]: [Map<string, string>[], SortDescriptor[]]) => {
                data.sort((item1, item2) => {
                    return this.compareObjects(item1, item2, 'version')
                })
                return data;
            })
        );

        return sortedData$;
    }

    compareObjects(object1 : Map<string, string>, object2: Map<string, string>, key) {
        let item1 = object1.get(key);
        let item2 = object2.get(key);

        const obj1 = item1.toUpperCase()
        const obj2 = item2.toUpperCase()

        if (obj1 < obj2) {
            return -1
        }
        if (obj1 > obj2) {
            return 1
        }
        return 0
    }

Sort Grid data is called at another point in my component. I'm not sure that is entirely relevant.

Please consider modifying the code in this question so as to constitute a minimal reproducible example which, when dropped into a standalone IDE like The TypeScript Playground, clearly demonstrates the issue you are facing. This will allow those who want to help you to immediately get to work solving the problem without first needing to re-create it. And it will make it so that any answer you get is testable against a well-defined use case. — jcalz
– jcalz, Commented Apr 8, 2021 at 15:44

Християн Христов · Accepted Answer · 2021-04-13 06:55:24Z

I will assume that the data is coming from some state-management observable based library.

If my assumption is correct the issue is because you try to mutate immutable element, what i mean is that Array.sort is making changes over the existing array named data, a.k.a. it mutates it, and because the data itself is an immutable array (read-only no modification allowed) you are receiving this error.

The thing that will most-likely solve your issue is to create a copy of the data array, and after that sort the elements inside this new copy.

sortGridData(data$ : Observable<Map<string, string>[]>) : Observable<Map<string, string>[]> {
        const sortedData$ = combineLatest([data$, this.sort$]).pipe(
            map(([data, sort]: [Map<string, string>[], SortDescriptor[]]) => {
                // here we create a new array, that can be mutated
                const dataCopy = [...data];
                
                dataCopy.sort((item1, item2) => {
                    return this.compareObjects(item1, item2, 'version')
                })
                return dataCopy;
            })
        );

        return sortedData$;
    }

If this doesn't solve your issue please provide some more context about from where is the sortGridData being called, and to what is the data$ referring to, when the function is called.

Collectives™ on Stack Overflow

Sorting an array of maps by a key in typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related