Javascript order object properties based on defined value

Question

I have a two pieces of data I am working with to ultimately generate an HTML table.

Data: This is the core data that would come from a database call.

UserColumns: This defines which order the table columns will be in. The fieldSource in this object will align with the key names in the data object.

// Define the core data we will be working with. Assumed this comes from a database,
var data = [{
    FirstName: 'Joe',
    LastName: 'Jones',
    Age: 21,
    Location: 'Arizona',
    Color: 'Red', // Not defined in the column structure, therefore is not included in output
    Order: 1
  },
  {
    FirstName: 'Tim',
    LastName: 'Bob',
    Age: 25,
    Location: 'California',
    Color: 'Blue',
    Order: 3
  },
  {
    FirstName: 'Sally',
    LastName: 'Smith',
    Age: 29,
    Location: 'Florida',
    Color: 'Green',
    Order: 2
  }
];

// Defines the columns the user wants to include in their table output as well as their order
var userColumns = [{
    FieldID: 1,
    FieldSource: 'FirstName',
    FieldName: 'First Name',
    Order: 2
  },
  {
    FieldID: 2,
    FieldSource: 'LastName',
    FieldName: 'Last Name',
    Order: 1
  },
  {
    FieldID: 3,
    FieldSource: 'Age',
    FieldName: 'Age',
    Order: 4
  },
  {
    FieldID: 4,
    FieldSource: 'Location',
    FieldName: 'Location',
    Order: 3
  }
];

/*
    Loop over the data and order the content in the desired column order.
*/
function generateTableRows() {

  let output = [];

  for (var j = 0; j < data.length; j++) {
    // Need to re-order the object keys based on the "User Columns".
    // This also needs to ensure the the table rows are in the correct order based on the "Order" property
    console.log(data[j]);
  }

}

In the example code above, the keys in data need to be re-ordered to match the order defined in the userColumns object.

End goal here is that the user will see the table of data in their desired view (columns in the defined order).

How can I go about putting the keys in a specific order and will they remain that way in the object or can they change?

I need to essentially take an object of data and then output re-arrange it so that its in the user defined order when it comes time to render a table.

Here is a fiddle of the full task at hand I am trying to workout: https://jsfiddle.net/os48s1ne/

@Barmar - Correct, which is why I am trying to figure out how to structure this so that I can define one (through an array for example or some other means). — SBB
– SBB, Commented May 24, 2018 at 19:59
Sort userColumns by the Order property. Then loop through userColumns and access the corresponding property of data[j]. — Barmar
– Barmar, Commented May 24, 2018 at 20:00
The answer below is solid, but if you want to preserve order you should consider assigning the values generated by that code in the answer to a Set() developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Randy Casburn
– Randy Casburn, Commented May 24, 2018 at 20:17

Barmar · Accepted Answer · 2018-05-24 20:09:22Z

3

Sort the userColumns property, then loop through it and use the FieldSource properties to access the corresponding properties in the data.

/*
    Loop over the data and order the content in the desired column order.
*/
function generateTableRows() {
  userColumns.sort((a, b) => a.Order - b.Order);
  let output = data.map(d => userColumns.map(({
    FieldSource,
    FieldName
  }) => `${FieldName} = ${d[FieldSource]}`).join(', '));
  console.log(output);
}

// Define the core data we will be working with. Assumed this comes from a database,
var data = [{
    FirstName: 'Joe',
    LastName: 'Jones',
    Age: 21,
    Location: 'Arizona',
    Color: 'Red', // Not defined in the column structure, therefore is not included in output
    Order: 1
  },
  {
    FirstName: 'Tim',
    LastName: 'Bob',
    Age: 25,
    Location: 'California',
    Color: 'Blue',
    Order: 3
  },
  {
    FirstName: 'Sally',
    LastName: 'Smith',
    Age: 29,
    Location: 'Florida',
    Color: 'Green',
    Order: 2
  }
];

// Defines the columns the user wants to include in their table output as well as their order
var userColumns = [{
    FieldID: 1,
    FieldSource: 'FirstName',
    FieldName: 'First Name',
    Order: 2
  },
  {
    FieldID: 2,
    FieldSource: 'LastName',
    FieldName: 'Last Name',
    Order: 1
  },
  {
    FieldID: 3,
    FieldSource: 'Age',
    FieldName: 'Age',
    Order: 4
  },
  {
    FieldID: 4,
    FieldSource: 'Location',
    FieldName: 'Location',
    Order: 3
  }
];



generateTableRows();

answered May 24, 2018 at 20:09

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

3 Comments

SBB Over a year ago

Is it possible to include the data with the final array? For example:

var output = [{     data: {         FirstName: 'Joe',         LastName: 'Jones',         Age: 21,         Location: 'Arizona',         Color: 'Red',         Order: 1     },     newStuff: [Jones, Joe, Arizona, 21] }]

SBB Over a year ago

This function is used to generate table rows. I need to hardcode the first td in my table to contain a specific datapoint from the result. The issue is that since the final output is just the array, I can't call the datapoint I need by the property name data.Color for example. Here is the final output I am trying to get jsfiddle.net/f3ubeho2

Barmar Over a year ago

let output = data.map(d => ({ data: d, newStuff: userColumns.map(({ FieldSource, FieldName }) => ${d[FieldSource]})}));

Collectives™ on Stack Overflow

Javascript order object properties based on defined value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related