JSFiddle - React, Tailwind, and code Playground

by Julien Roy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.js"></script>

Babel + JSX

var data = {
  centralLearningZone: {
    groupNames: {
      "0": "Garage",
      "1": "Jardin",
      "2": "",
      "3": "",
      "4": "",
      "5": "",
      "6": "",
      "7": ""
    },
    centralInformation: {
      radioId: "181E0B"
    },
    commands: [{
      label: 'Commande 1',
      group: '0'
    }, {
      label: 'Commande 2',
      group: '1'
    }],
    sensors: [{
      label: 'Sensor 1',
      group: '1'
    }]
  }
};

var allProducts = data.centralLearningZone.commands.concat(data.centralLearningZone.sensors);

var getGroupLabel = (groupId) => data.centralLearningZone.groupNames[groupId];

var result = _.chain(allProducts)
  .groupBy('group')
  .toPairs()
  .map((group) => _.fromPairs(_.zip(['id', 'products'], group)))
  .map((group) => {
    group.label = getGroupLabel(group.id);
    return group;
  })
  .value();
console.log(result);