通过比较两个数组基于索引映射键

Question

我有两个数组。

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 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'
  }
]

目前，我正在尝试此操作。它适用于第一个数组，但不适用于第二个数组。请指教。

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>

ID按顺序排列，但我希望基于索引。请指教。

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));

通过关联性保留索引的哈希图方法

Answer 2

我认为您可以做类似的事情（可能需要小的重构）：

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);