How to sort array of objects in Javascript by their keys in order?

Question

I have an array of objects like this:

 const jData = [
    {
      price: "500",
      count: "10",
      left: "150"
    },
    {
      left: "75",
      price: "350",
      count: "40"
    },
    {
      count: "200",
      left: "50",
      price: "7500"
    }
  ];

and array of orderedData like this :

orderedData = ["price", "count", "left"]

I'm trying to sort my array of objects (jData) by keys so that keys will be in the same order as orderedData.

So far my code looks like this:

import "./styles.css";

export default function App() {
  const jData = [
    {
      price: "500",
      count: "10",
      left: "150"
    },
    {
      left: "75",
      price: "350",
      count: "40"
    },
    {
      count: "200",
      left: "50",
      price: "7500"
    }
  ];

  const orderedData = ["price", "count", "left"];

  let res = jData?.flatMap((x) => Object.keys(x));

  var unique = res.filter(function (elem, index, self) {
    return index === self.indexOf(elem);
  });

  const keys = unique?.filter((key) => orderedData.includes(key));
  
  console.log(keys)

  let newData = jData.sort(
    (a, b) =>
      orderedData.indexOf(a) - orderedData.indexOf(b)
  )
  
  console.log(newData)
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

codesandbox

I was able to get keys from my array of objects and sort them in the correct order, when I'm console logging keys

  console.log(keys); => output is 

["price"
1: "count"
2: "left"] // same order as in orderedData = ["price", "count", "left"]

but when I'm trying to sort my jData array so that keys in objects will be positioned in the same order, nothing changes.

let newData = jData.sort(
    (a, b) =>
      orderedData.indexOf(a) - orderedData.indexOf(b)
  )
 console.log(newData) => outputs objects with the same positioned keys.

What I would love to achieve is to display objects like this:

const jData = [
    {
      price: "500",
      count: "10",
      left: "150"
    },
    {
      price: "350",
       count: "40",
      left: "75",
     
    },
    {
      price: "7500"
      count: "200",
      left: "50",
     
    }
  ];

I don't know if it's possible to do in Javascript? Thank you for any tip/suggestion.

Object key ordering is recently guaranteed, but what difference does it make? Generally, you look them up by key instead of iterate. This could be an XY problem — ggorlen
– ggorlen, Commented Apr 2, 2021 at 2:46
@ggorlen, I'll need to iterate through objects later in my app and I need keys:values to be displayed in the correct order. — nika
– nika, Commented Apr 2, 2021 at 2:48
@ggorlen, could you please share a code, I'm fairly new to JavaScript and don't know how to do that. — nika
– nika, Commented Apr 2, 2021 at 2:52

Wai Ha Lee · Accepted Answer · 2021-04-02 13:55:21Z

1

As @ggorlen suggested, the order of keys in an object is not guaranteed. You could iterate over orderedData to access the keys from each object in the order you need:

jData.map((item) => (
  <ul>
    orderedData.map((key) => <li>{key}: {item[key]}</li>)
  </ul>
));

edited Apr 2, 2021 at 13:55

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Apr 2, 2021 at 3:11

roperzh

1,0209 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mocuishle · Accepted Answer · 2021-04-02 03:26:42Z

1

You can try this:

 function orderedDataByCustomizedKey(jData,orderedData) {
        const newjData = [];
        jData.forEach((item, i) => {
            const temObj = {};
            orderedData.forEach((orderedDataItem, index) => {
                temObj[orderedDataItem] = item[orderedDataItem];
            })
            newjData.push(temObj);
        })
        return newjData;
    }

answered Apr 2, 2021 at 3:26

Mocuishle

1742 bronze badges

Comments

Vinibr · Accepted Answer · 2021-04-02 04:03:17Z

1

I guess this is the best solution for you. Check this out.

const jData = [
    {
      price: "500",
      count: "10",
      left: "150"
    },
    {
      left: "75",
      price: "350",
      count: "40"
    },
    {
      count: "200",
      left: "50",
      price: "7500"
    }
  ];


const orderedData = jData.map(x=> {
    return Object.entries(x)
    .sort(([,a],[,b]) => b-a)
    .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
})

console.log(orderedData)

answered Apr 2, 2021 at 4:03

Vinibr

8438 silver badges14 bronze badges

Comments

ggorlen · Accepted Answer · 2021-04-02 04:15:42Z

Relying on object key order is an antipattern, even when an implementation guarantees insertion order. Objects are traditionally collections of key-value pairs, suitable for lookup by key but not as friendly to iteration or sorting as arrays.

Instead of ordering the object, the general approach to tabular data like this is to provide the array orderedData alongside the object and, when you need the object's keys in a particular order, map along orderedData and key into each column of the row. You can think of orderedData as headers or column names of the table and jData as row data.

Here's a proof of concept you can extrapolate to your use case (I realize you're probably not creating the exact component Table, but it illustrates my point):

const Table = ({rows, columns}) =>
  <table>
    <tbody>
      {columns.map((name, i) => 
        <th key={name + i}>{name}</th>
      )}
      {rows.map((row, i) =>
        <tr key={i}>
          {columns.map((name, i) => 
            <td key={name + i}>{row[name]}</td>
          )}
        </tr>
      )}
    </tbody>
  </table>
;

const jData = [
  {
    price: "500",
    count: "10",
    left: "150"
  },
  {
    left: "75",
    price: "350",
    count: "40"
  },
  {
    count: "200",
    left: "50",
    price: "7500"
  }
];
const orderedData = ["price", "count", "left"];
ReactDOM.render(
  <Table rows={jData} columns={orderedData} />,
  document.body
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

Collectives™ on Stack Overflow

How to sort array of objects in Javascript by their keys in order?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related