使用 javascript 按键值对 json object 进行排序

Question

I am trying to sort json object by key, but the keys sometimes contain an array therefore it sort data incorrectly. the problem with my function: it dosen't compare array's index I just want to get my data sorted by the full key.

Below the wrong output result.

const byKey = o =>
 Object.keys(o)
   .sort()
   .reduce((r, k) => ((r[k] = o[k]), r), {});

Wrong output result

{
  "admin.name":"Okdaro fripi:",
  "amazon.token":"kqjndkJQNDjkmdnJKQDNKmjdqnmjdnQKMD",
  "data.content":"ABCD",
  "dimitro.job":"create",
  "person.account.email[0].card[0]":"VISA",
  "person.account.email[0].firstname":"George Blaksar",
  "person.account.email[0].org":"gmail",
  "person.account.email[10].card[0]":"yalla",
  "person.account.email[10].firstname":"qabte",
  "person.account.email[10].org":"amazon",
  "person.account.email[1].card[0]":"Master card",
  "person.account.email[1].firstname":"balbi",
  "person.account.email[1].org":"yahoo",
  "person.account.email[2].card[0]":"payoneer",
  "person.account.email[2].firstname":"pinaro",
  "person.account.email[2].org":"facebook",
...
  "person.account.email[9].card[0]":"yalla",
  "person.account.email[9].firstname":"qabte",
  "person.account.email[9].org":"amazon",
  "zend.port":99
}

Below what I want to get

{
 "admin.name": "Okdaro fripi:",
 "amazon.token": "kqjndkJQNDjkmdnJKQDNKmjdqnmjdnQKMD",
 "data.content": "ABCD",
 "dimitro.job": "create",
 "person.account.email[0].card[0]": "VISA",
 "person.account.email[0].firstname": "George Blaksar",
 "person.account.email[0].org": "gmail",
 "person.account.email[1].card[0]": "Master card",
 "person.account.email[1].firstname": "balbi",
 "person.account.email[1].org": "yahoo",
 "person.account.email[2].card[0]": "payoneer",
 "person.account.email[2].firstname": "pinaro",
 "person.account.email[2].org": "facebook",
 "person.account.email[3].card[0]": "aws",
 "person.account.email[3].firstname": "zartb",
 "person.account.email[3].org": "amazon",
 "person.account.email[4].card[0]": "Master card 4",
 "person.account.email[4].firstname": "blinago ",
 "person.account.email[4].org": "yahoo",
 "person.account.email[5].card[0]": "lbl",
 "person.account.email[5].firstname": "tarficana",
 "person.account.email[5].org": "netflix",
 "person.account.email[6].card[0]": "yalla",
 "person.account.email[6].firstname": "qabte",
 "person.account.email[6].org": "amazon",
 "person.account.email[7].card[0]": "Master card 4",
 "person.account.email[7].firstname": "blinago ",
 "person.account.email[7].org": "yahoo",
 "person.account.email[8].card[0]": "lbl",
 "person.account.email[8].firstname": "tarficana",
 "person.account.email[8].org": "netflix",
 "person.account.email[9].card[0]": "yalla",
 "person.account.email[9].firstname": "qabte",
 "person.account.email[9].org": "amazon",
  "person.account.email[10].card[0]": "yalla",
 "person.account.email[10].firstname": "qabte",
 "person.account.email[10].org": "amazon",
 "zend.port": 99
}

Answer 1

You could order the keys with String#localeCompare and using options which sorts by groups of the string.

 const object = { "admin.name": "Okdaro fripi:", "amazon.token": "kqjndkJQNDjkmdnJKQDNKmjdqnmjdnQKMD", "data.content": "ABCD", "dimitro.job": "create", "person.account.email[0].card[0]": "VISA", "person.account.email[0].firstname": "George Blaksar", "person.account.email[0].org": "gmail", "person.account.email[10].card[0]": "yalla", "person.account.email[10].firstname": "qabte", "person.account.email[10].org": "amazon", "person.account.email[1].card[0]": "Master card", "person.account.email[1].firstname": "balbi", "person.account.email[1].org": "yahoo", "person.account.email[2].card[0]": "payoneer", "person.account.email[2].firstname": "pinaro", "person.account.email[2].org": "facebook", "person.account.email[9].card[0]": "yalla", "person.account.email[9].firstname": "qabte", "person.account.email[9].org": "amazon", "zend.port": 99 }; console.log(Object.fromEntries(Object.entries(object).sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }))) );

 .as-console-wrapper { max-height: 100%;important: top; 0; }