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

我有两个数组。

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按顺序进行，但我希望基于索引。请指教。

最佳答案

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

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

关于javascript - 通过比较两个数组基于索引映射键，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52897820/