0

I am trying to sort an object alphabetically in react/javascript in a java application Im not sure how to do it and i keep getting the same error.

Here is the function code and i am trying to sort both build and catalog objects

import React, { useContext } from 'react'
import DetailHeader from '../detailHeader/DetailHeader'
import style from './installedOptions.scss';
import { MainContext } from '../../../Context';
import Grid from '../../common/grid/Grid';

function InstalledOptions() {

const dsContext: any = useContext(MainContext)
const build = dsContext.dsState.installedOptions.premiumPlus;
const catalog = dsContext.dsState.installedOptions.premium;

return (
    <div className={style.header} id="installedOptions">
        <DetailHeader heading="INSTALLED OPTIONS" />
        {
            build.header && <div className={style.grid}>
                <Grid header={[build.header]} tableData={[build.details]} />
                <Grid header={[catalog.header]} tableData={[catalog.details]} />
            </div>
        }

    </div>
  )
}

export default InstalledOptions

what i have tried that throws errors

const sortedCatalog = [...catalog ]

sortedCatalog.sort((a, b) => {
    if (a.name < b.name) {
        return -1;
    }
    if (a.name > b.name) {
        return 1;
    }
    return 0;
});

// console.log(sortedCatalog)

error

bundle.js:27 TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

im at a loss on how to sort alphabetically. Thanks in advance

steller
  • 245
  • 3
  • 14
  • 1
    I don't see any Java code. – shmosel Jan 06 '22 at 20:54
  • sorry, i tagged java because its a java app. I removed it – steller Jan 06 '22 at 20:59
  • 1
    You could have saved most of that code by only showing the minimal problematic line `obj = {a: 1, b: 2}; arr = [ ...obj ]` which the error tells you is impossible to do. Or by explaining what you attempt to do, instead of giving all this irrelevant code that just shows an impossible operation. *What* should be sorted? The object's properties? Make sure you read https://stackoverflow.com/q/5525795 and https://stackoverflow.com/q/30076219. Do you want *an array*? You have to specify what goes in the array - keys, values, something else. We have duplicates for that, as well. – VLAZ Jan 06 '22 at 21:00
  • You don’t need to sort an object. Use the properties where you need it, or extract the keys out into an array and sort that – evolutionxbox Jan 06 '22 at 21:00
  • i want to sort by name – steller Jan 06 '22 at 21:01
  • But why though? Objects don’t need sorting – evolutionxbox Jan 06 '22 at 21:04
  • 2
    Seems all you need to change is `[...catalog ]` -> `[...catalog.details ]` – VLAZ Jan 06 '22 at 21:04
  • because whats displayed in the table are names and they are not in order – steller Jan 06 '22 at 21:05
  • @vlz i thought i tried that before but it appears to be working. Can you help with one more thing with the sorting?? – steller Jan 06 '22 at 21:12
  • 1
    The error has nothing to do with sorting, so: if your sorting doesn't work, please update your post to show working code that _only_ breaks (or yields the wrong result) with respect to sorting. Right now, the error you're talking about is purely about your use of `[...catalog]`, which [tries to spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) an object into an array, which you can't do, with the solution for that covered by @VLAZ – Mike 'Pomax' Kamermans Jan 06 '22 at 21:26

0 Answers0