Manipulate Api Data-CodePudding

I have this data coming from an api, I am trying to fetch it on the UI using map method with React, it is been hard to do so since the object key is a date (Number).

const Data = [
  {
    20221011: "100.00",
    20221012: "100.00",
    20221013: "100.00",
    20221014: "100.00",
    20221015: "100.00",
  },
  {
    20221011: "99.00",
    20221012: "99.00",
    20221013: "99.00",
    20221014: "99.00",
    20221015: "99.00",
  },
  {
    20221011: "98.00",
    20221012: "98.00",
    20221013: "98.00",
    20221014: "98.00",
    20221015: "98.00",
  },
  {
    20221011: "97.00",
    20221012: "97.00",
    20221013: "97.00",
    20221014: "97.00",
    20221015: "97.00",
  },
];

I am trying to manipulate this data and change it to something like below, so I can map over it easily.

I wanna have two properties, "key" for the date and "value" for the percentage.

If someone can help with an algorithm can solve this problem would be great.

thank you

  const Data = [
      {
      data: [
        {key: "10/11/2022", value: "100.00"},
        {key: "10/12/2022", value: "100.00"},
        {key: "10/13/2022", value: "100.00"},
        {key: "10/14/2022", value: "100.00"},
        {key: "10/15/2022", value: "100.00"},
        ] 
      },
      {
       data: [
       {key: "10/11/2022", value: "99.00"},
        {key: "10/12/2022", value: "99.00"},
        {key: "10/13/2022", value: "99.00"},
        {key: "10/14/2022", value: "99.00"},
        {key: "10/15/2022", value: "99.00"},
        ] 
      },
      {
       data: [
        {key: "10/11/2022", value: "98.00"},
        {key: "10/12/2022", value: "98.00"},
        {key: "10/13/2022", value: "98.00"},
        {key: "10/14/2022", value: "98.00"},
        {key: "10/15/2022", value: "98.00"},
        ] 
      },
      {
       data: [
        {key: "10/11/2022", value: "97.00"},
        {key: "10/12/2022", value: "97.00"},
        {key: "10/13/2022", value: "97.00"},
        {key: "10/14/2022", value: "97.00"},
        {key: "10/15/2022", value: "97.00"},
        ] 
      },
    ];

CodePudding user response：

Take a look at it. You can achieve the desired data via map()

const Data = [{
    20221011: "100.00",
    20221012: "100.00",
    20221013: "100.00",
    20221014: "100.00",
    20221015: "100.00",
  },
  {
    20221011: "99.00",
    20221012: "99.00",
    20221013: "99.00",
    20221014: "99.00",
    20221015: "99.00",
  },
  {
    20221011: "98.00",
    20221012: "98.00",
    20221013: "98.00",
    20221014: "98.00",
    20221015: "98.00",
  },
  {
    20221011: "97.00",
    20221012: "97.00",
    20221013: "97.00",
    20221014: "97.00",
    20221015: "97.00",
  },
];

const result = Data.map(f => {
  return {
    data: Object.keys(f).map(m => {
      return {
        key: `${m.slice(4, 6)}/${m.slice(6, 8)}/${m.slice(0, 4)}`,
        value: f[m]
      }
    })
  }
});

console.log(result);

CodePudding user response：

const Data = [
  {
    20221011: "100.00",
    20221012: "100.00",
    20221013: "100.00",
    20221014: "100.00",
    20221015: "100.00"
  },
  {
    20221011: "99.00",
    20221012: "99.00",
    20221013: "99.00",
    20221014: "99.00",
    20221015: "99.00"
  },
  {
    20221011: "98.00",
    20221012: "98.00",
    20221013: "98.00",
    20221014: "98.00",
    20221015: "98.00"
  },
  {
    20221011: "97.00",
    20221012: "97.00",
    20221013: "97.00",
    20221014: "97.00",
    20221015: "97.00"
  }
];

const arr = [];

  const parseDate = (param) => {
    const date = new Date(Number(param));
    return date.toLocaleDateString();
  };

  const data = Data.map((elem, i) => {
    arr.push({
      key: parseDate(Object.keys(elem)[i]),
      value: Object.values(elem)[i]
    });
    return { data: arr };
  });
  
  console.log(data)