JSFiddle - React, Tailwind, and code Playground

by CHRIS ROBBINS

HTML

<p>
Write a function that transforms the <code>start</code> data structure into the <code>expected</code> data structure. Your function should not modify the original data structure -- instead, it should return a new structure.
</p>

<p>
Your solution will be judged using the following criteria:
<ul>
<li>correctness</li>
<li>efficiency</li>
<li>code quality</li>
<li>code size</li>
<li>copypasta (we only want to see YOUR code!)</li>
</ul>
</p>

<p>
We recommend spending 30 minutes on this problem.
</p>

<p>
<b>Bonus:</b> Use only methods from <code>Object</code> and <code>Array</code> instead of <code>for</code> or <code>while</code> loops.
</p>

CSS

body {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.3em;
}

Babel + JSX

function transform(data) {
arr = [];
  Object.entries(data).forEach(value => {
  Object.entries(value[1]).forEach(newVal => {
  if (newVal[1].active === false) {
  delete newVal[1];
  } else {
  arr.sort().push({
    label: newVal[1].name,
    value: newVal[1].id,
    group: value[0]
    })
    }
   }) 
  })
  newArray = arr.sort((a, b) => {
 let groupA=a.group.toLowerCase(), groupB=b.group.toLowerCase();
 if (groupA < groupB) //sort string ascending
  return -1;
 if (groupA > groupB)
  return 1;
 return 0; //default return value (no sorting)
  });
  
  return newArray;
}


const start = {
  Clients: {
    171: { id: 171, name: 'John Smith', active: false },
    172: { id: 172, name: 'Jacob Jacobson', active: true },
    1441: { id: 1441, name: 'Eric Ericsson', active: true },
  },
  Caregivers: {
    1: { id: 1, name: 'John Johnson', active: true },
    37: { id: 37, name: 'James Jameson', active: false },
    15: { id: 15, name: 'Aaron Aaronson', active: true },
  },
  Doctors: {
    1147: { id: 1147, name: 'Doc Docson', active: true },
  },
  Hospitals: {
    115: { id: 115, active: false, name: "St. Mary's" },
  },
  Applicants: {
    17345: { id: 17345, name: 'Bob Bobson', active: true },
    17346: { id: 17346, name: 'Jeff Jeffson', active: false },
    17347: { id: 17347, name: 'Frank Frankson', active: true },
    17348: { id: 17348, name: 'Bill Billson', active: true },
  },
};

// Notice that the entries are sorted by group first, then label.
// Notice also that active: false records are excluded.
const expected = [
  { label: 'Bill Billson', value: 17348, group: 'Applicants' },
  { label: 'Bob Bobson', value: 17345, group: 'Applicants' },
  { label: 'Frank Frankson', value: 17347, group: 'Applicants' },
  { label: 'Aaron Aaronson', value: 15, group: 'Caregivers' },
  { label: 'John Johnson', value: 1, group: 'Caregivers' },
  { label: 'Eric Ericsson', value: 1441, group: 'Clients' },
  { label: 'Jacob Jacobson', value: 172, group: 'Clients' },
  {...