Map keys based on index by comparing two arrays

Question

I have two arrays.

const headers = ['Cars', 'Fruits', 'Food'];

const data = [{
    group: 'Cars',
    name: 'BMW',
    value: '25641'
  }, {
    group: 'Fruits',
    name: 'Apple',
    value: '45876'
  },
  {
    group: 'Cars',
    name: 'Benz',
    value: '65784'
  },
  {
    group: 'Cars',
    name: 'Toyota',
    value: '254'
  },
  {
    group: 'Food',
    name: 'Pizza',
    value: '87535'
  },
  {
    group: 'Cars',
    name: 'Honda',
    value: '65796'
  },
  {
    group: 'Fruits',
    name: 'Banana',
    value: '98631'
  },
  {
    group: 'Fruits',
    name: 'Orange',
    value: '87563'
  },
  {
    group: 'Food',
    name: 'Burger',
    value: '78324'
  },
  {
    group: 'Fruits',
    name: 'Mango',
    value: '24598'
  }
]

I need to map them to achieve a result like this:

const newArray = [{
    id: '11',
    parent: '01',
    name: 'BMW',
    value: '25641'
  }, {
    id: '21',
    parentId: '02',
    name: 'Apple',
    value: '45876'
  },
  {
    id: '12',
    parentId: '01',
    name: 'Benz',
    value: '65784'
  },
  {
    id: '13',
    parentId: '01'
    name: 'Toyota',
    value: '254'
  },
  {
    id: '31',
    parentId: '03',
    name: 'Pizza',
    value: '87535'
  },
  {
    id: '14',
    parentId: '01',
    name: 'Honda',
    value: '65796'
  },
  {
    id: '22',
    parentId: '02',
    name: 'Banana',
    value: '98631'
  },
  {
    id: '23',
    parentId: '02',
    name: 'Orange',
    value: '87563'
  },
  {
    id: '32',
    parentId: '03',
    name: 'Burger',
    value: '78324'
  },
  {
    id: '24',
    parentId: '02',
    name: 'Mango',
    value: '24598'
  }
]

Currently I am trying this. It works out for the 1st array but not for the second ones correctly. Please advice.

 const headers = ['Cars', 'Fruits', 'Food']; const data = [{ group: 'Cars', name: 'BMW', value: '25641' }, { group: 'Fruits', name: 'Apple', value: '45876' }, { group: 'Cars', name: 'Benz', value: '65784' }, { group: 'Cars', name: 'Toyota', value: '254' }, { group: 'Food', name: 'Pizza', value: '87535' }, { group: 'Cars', name: 'Honda', value: '65796' }, { group: 'Fruits', name: 'Banana', value: '98631' }, { group: 'Fruits', name: 'Orange', value: '87563' }, { group: 'Food', name: 'Burger', value: '78324' }, { group: 'Fruits', name: 'Mango', value: '24598' } ] const chart2ndLayer = _.map(data, (itemB, indexB) => { const parentIndex = headers.indexOf(itemB.group); return { id: `${parentIndex + 1}${indexB + 1}`, parent: `0${parentIndex + 1}`, value: parseInt(itemB.value, 10), name: itemB.name }; }); console.log(chart2ndLayer) 

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

The id's go in order but I want it based on index. Please advice.

Answer 1

 const headers = ['Cars', 'Fruits', 'Food']; const data = [{ group: 'Cars', name: 'BMW', value: '25641' }, { group: 'Fruits', name: 'Apple', value: '45876' }, { group: 'Cars', name: 'Benz', value: '65784' }, { group: 'Cars', name: 'Toyota', value: '254' }, { group: 'Food', name: 'Pizza', value: '87535' }, { group: 'Cars', name: 'Honda', value: '65796' }, { group: 'Fruits', name: 'Banana', value: '98631' }, { group: 'Fruits', name: 'Orange', value: '87563' }, { group: 'Food', name: 'Burger', value: '78324' }, { group: 'Fruits', name: 'Mango', value: '24598' } ] const createNewArray = (data, headers) => { const GROUP_INDEX = {}; return data.map((object) => { if (!GROUP_INDEX[object.group]) { GROUP_INDEX[object.group] = 0; } GROUP_INDEX[object.group]++; const parentIndex = headers.indexOf(object.group); return { id: `${parentIndex + 1}${GROUP_INDEX[object.group]}`, parent: `0${parentIndex + 1}`, value: parseInt(object.value, 10), name: object.name } }) } /* const chart2ndLayer = _.map(data, (itemB, indexB) => { const parentIndex = headers.indexOf(itemB.group); return { id: `${parentIndex + 1}${indexB + 1}`, parent: `0${parentIndex + 1}`, value: parseInt(itemB.value, 10), name: itemB.name }; }); console.log(chart2ndLayer) */ console.log(createNewArray(data, headers)); 

The hashmap approach to preserve index by relevance

Answer 2

I think you could do something like (small refactoring may be needed):

const n = (i) => i > 9 ? i : `0${i}`;

function joinArrays(headers, dataArray) {
    const _newArray = headers.map((h, i) => {
        dataArray
            .filter((item, index) => {
                return item.group === h;
            }).forEach(item => {
                item.parent = n(i);
            });

        return h;
    });

    return newArray;
}

joinArrays(headers, data);