I'm using react and typescript.
I want to format an array to create an object of ①. I want to process the value of dataList to make it look like ①. I tried to use Object.keys, but it doesn't work.
If anyone knows what I'm talking about, please let me know.

①This is the array I want to make.
const data = [
{ label: "groupTypeA",data: [10,10,10], stack:1　},
{ label: "groupTypeB"　, data: [9,9,9],stack:1},
{ label: "groupTypeC", data: [8,8,8],stack:1　},
]

import "./styles.css";

const App = () => {
  const categoryName: { [key: string]: string } = {
    group_a: "groupTypeA",
    group_b: "groupTypeB",
    group_c: "groupTypeC"
  };

  const datalist = [
    {
      group_a: 10,
      group_b: 9,
      group_c: 8,
      group_d: 7
    },
    {
      group_a: 10,
      group_b: 9,
      group_c: 8,
      group_d: 7
    },
    {
      group_a: 10,
      group_b: 9,
      group_c: 8,
      group_d: 7
    }
  ];

  const list = () => {
    datalist.map((data) =>
      Object.keys(categoryName).map((category) => {
        console.log(category);
        console.log(data);
      })
    );
  };

  list();
  return (
    <div className="App">
    </div>
  );
};

export default App;

CodePudding user response：

You can first compute a map of keys from the category names to their label values, then reduce the data list into the appropriate matching category key, then return the final array of computed values of category labels and data values.

const mergeDataIntoCategory = (categories, data) => {
  const catMap = Object.entries(categories).reduce(
    (catMap, [key, label]) => ({
      ...catMap,
      [key]: {
        label,
        data: []
      }
    }),
    {}
  );

  data.forEach((el) =>
    Object.entries(el).forEach(([key, value]) => {
      catMap[key] && catMap[key].data.push(value);
    })
  );

  return Object.values(catMap);
};

const categoryName = {
  group_a: "groupTypeA",
  group_b: "groupTypeB",
  group_c: "groupTypeC"
};

const datalist = [
  {
    group_a: 10,
    group_b: 9,
    group_c: 8,
    group_d: 7
  },
  {
    group_a: 10,
    group_b: 9,
    group_c: 8,
    group_d: 7
  },
  {
    group_a: 10,
    group_b: 9,
    group_c: 8,
    group_d: 7
  }
];

const mergeDataIntoCategory = (categories, data) => {
  const catMap = Object.entries(categories).reduce(
    (catMap, [key, label]) => ({
      ...catMap,
      [key]: {
        label,
        data: [],
        stack: 1,
      }
    }),
    {}
  );

  data.forEach((el) =>
    Object.entries(el).forEach(([key, value]) => {
      catMap[key] && catMap[key].data.push(value);
    })
  );

  return Object.values(catMap);
};

const res = mergeDataIntoCategory(categoryName, datalist);

console.log(res);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could loop into Object.keys(categoryName) values making your result array with key as label; a map to collect all the datalist values and stack that is fixed for all:

const categoryName = { group_a: "groupTypeA", group_b: "groupTypeB", group_c: "groupTypeC" }; 

const datalist = [ { group_a: 10, group_b: 9, group_c: 8, group_d: 7 }, { group_a: 10, group_b: 9, group_c: 8, group_d: 7 }, { group_a: 10, group_b: 9, group_c: 8, group_d: 7 } ];

let result = [];
Object.keys(categoryName).forEach((key) => {
  result.push({
      label: key,
      data: datalist.map((dat) => dat[key]),
      stack: 1
   })
})
console.log(result);

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>