Sorting & arrange list of object inside object on the basis of order key

const listing = {
   "football":{
      "name":"FOOTBALL",
      "slug":"football",
      "arr":[],
      "order": 4
   },
   "table-tennis":{
      "name":"TABLE TENNIS",
      "slug":"table-tennis",
      "arr":[],
      "order": 1
   },
   "cricket":{
      "name":"CRICKET",
      "slug":"cricket",
      "arr":[],
      "order": 5
   },
   "badminton":{
      "name":"BADMINTON",
      "slug":"badminton",
      "arr":[],
      "order": 2
   },
   "hockey":{
      "name":"HOCKEY",
      "slug":"hockey",
      "arr":[],
      "order": 3
   }
}

Object.keys(listing).sort().map((item) => {
  return (
    <div>
      <div onClick={() => sportsKitFilter()}>{listing[item].name}</div>
    </div>
  )
})

Actual Result:-

BADMINTON
CRICKET
FOOTBALL
HOCKEY
TABLE TENNIS

Expected Result:-

TABLE TENNIS
BADMINTON
HOCKEY
FOOTBALL
CRICKET

So, In the expected result, Storing is on the basis of order key

Guide me, In this scenerio??

CodePudding user response：

Currently i am sorting listing.order. try this code it's working !

 Object.keys(listing).sort((a, b) => listing[a].order - listing[b].order).map((item) => {
      return (
        <div>
          <div onClick={() => sportsKitFilter()}>{listing[item].name}</div>
        </div>
      )
    })

CodePudding user response：

How's this for you?

const listing = {
  football: {
    name: "FOOTBALL",
    slug: "football",
    arr: [],
    order: 4,
  },
  "table-tennis": {
    name: "TABLE TENNIS",
    slug: "table-tennis",
    arr: [],
    order: 1,
  },
  cricket: {
    name: "CRICKET",
    slug: "cricket",
    arr: [],
    order: 5,
  },
  badminton: {
    name: "BADMINTON",
    slug: "badminton",
    arr: [],
    order: 2,
  },
  hockey: {
    name: "HOCKEY",
    slug: "hockey",
    arr: [],
    order: 3,
  },
};

const ordered = Object.keys(listing).sort(
  (a, b) => listing[a].order - listing[b].order
).map(item => ["YOUR JSX HERE"]);