I dont get what I expect form the fucntion

Question

this is what I have written

const DataFromDataBase : IDataFromDataBase = {
  label :['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets : [{datasetName:'Dataset1', data:[1,3,5,2,5,2,6]},{datasetName:'Dataset2', data:[4,6,5,2,5,2,6]} ],
}     


 const DatatoBarChartJS  = {
      label,
      datasets : dataFromDataBase.datasets.map((dataset)=>{
        {
          label:dataset.datasetName
          data : dataset.data
          backgroundColor: 'rgba(255, 99, 132, 0.5)'
        }
      })
    }

I expect to have below construction for DatatoBarChartJS

['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 datasets: [
   {
     label: 'Dataset 1',
     data:[1,3,5,2,5,2,6] ,
     backgroundColor: 'rgba(255, 99, 132, 0.5)',
   },
   {
     label: 'Dataset 2',
     data:[4,6,5,2,5,2,6],
     backgroundColor: 'rgba(53, 162, 235, 0.5)',
   },
 ],

month names before datasets works fine but in datasets I get 2 empty arrays

it should be this enter image description here

but this is what I get enter image description here

why I cant produce what I expect

You get no "labels" because you don't set a labels property. The rest don't know; too annoying to keep flipping between two links to two pictures of text. Please include the expected and actual output as formatted text in the post. — Dave Newton, Mar 28 '22 at 13:44
You are able to use `.map` in two variations. One is like this: `.map(x => { return someThing; });`. Notice that after the arrow, there is a `{` curly-braces. In this variation, it is necessary to `return` (someThing like an object or string, etc). Another variation of `.map` is like this: `.map(x => ( someThing ));`. Here, someThing goes directly within the `(` & `)` paranthesis. In the code in the above question, variation one is used, but the `return` is missing. — jsN00b, Mar 28 '22 at 13:45
`map((dataset)=>{` that last open brace `{` means the arrow function is a code block, and yours doesn't return anything. I think you meant to have an open parenthesis there `(`. — Wyck, Mar 28 '22 at 13:45
You made this mistake/bug/typo: [ECMAScript 6 arrow function that returns an object](https://stackoverflow.com/questions/28770415/ecmascript-6-arrow-function-that-returns-an-object) — Wyck, Mar 28 '22 at 13:50

jsN00b · Answer 1 · 2022-03-28T13:49:51.787

1

The code in the question seems to use .map(x => {}); but missing the return.

Please try this:

 const DatatoBarChartJS  = {
      label,
      datasets : dataFromDataBase.datasets.map((dataset)=>{
        return {
          label:dataset.datasetName,
          data : dataset.data,
          backgroundColor: 'rgba(255, 99, 132, 0.5)'
        }
      })
    }

Kindly consider the following, if it is helpful:

 const DatatoBarChartJS  = {
      label,
      datasets : dataFromDataBase.datasets.map(
        ({datasetName, data}) => ({
          label: datasetName,
          data,
          backgroundColor: 'rgba(255, 99, 132, 0.5)'
        })
      )
    };

edited Mar 28 '22 at 13:49

answered Mar 28 '22 at 13:46

jsN00b

3,584
2
8
21

1

missing some commas aren't you? after `datasetName` and `.data` – Wyck Mar 28 '22 at 13:48
@Wyck, good one. Thank you for highlighting. Appreciate. RCA: The question did not have those & hence [GIGO](https://en.wikipedia.org/wiki/Garbage_in,_garbage_out), I guess. :-) – jsN00b Mar 28 '22 at 13:51

score 0 · Answer 2 · answered Mar 28 '22 at 13:46

This is because you are not returning anything from the map function. Take a look at the following code.

interface IDataset {
  datasetName: string;
  data: number[];
}

interface IDataFromDataBase {
  label: string[];
  datasets: IDataset[];
}

const DataFromDataBase: IDataFromDataBase = {
  label: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    { datasetName: "Dataset1", data: [1, 3, 5, 2, 5, 2, 6] },
    { datasetName: "Dataset2", data: [4, 6, 5, 2, 5, 2, 6] },
  ],
};

// INFERRED TYPE:
// const DatatoBarChartJS: {
//   label: string[];
//   datasets: {
//       label: string;
//       data: number[];
//       backgroundColor: string;
//   }[];
// }
const DatatoBarChartJS = {
  label: DataFromDataBase.label,
  datasets: DataFromDataBase.datasets.map((dataset) => {
    return {
      label: dataset.datasetName,
      data: dataset.data,
      backgroundColor: "rgba(255, 99, 132, 0.5)",
    };
  }),
};

console.log(DatatoBarChartJS);

I dont get what I expect form the fucntion

2 Answers2

Linked