TypeError: data.some is not a function
I'm trying to create a simple chart based on some data I get from an API, but I get the following error:
TypeError: data.some is not a function.
But I'm not to sure what the cause of this issue is?
type PointsData = {
speed: number,
distance: number,
}
type Series = {
label: string,
data: PointsData[]
}
export const LineChart = ({ data }: { data: Activity }) => {
const Chart = dynamic(() => import("react-charts").then(mod => mod.Chart), { ssr: false })
const chartData: Series = {
label: "Test",
data: data?.records?.map(e => ({
speed: e?.Speed,
distance: e?.Distance
}))
}
const primaryAxis = React.useMemo(
(): AxisOptions<PointsData> => ({
getValue: datum => datum?.speed,
}),
[]
)
const secondaryAxes = React.useMemo(
(): AxisOptions<PointsData>[] => [
{
getValue: datum => datum?.distance,
},
],
[]
)
return (
<>
{
chartData && chartData?.data.length && primaryAxis && secondaryAxes && (<ResizableBox>
<Chart
options={{
data: chartData,
primaryAxis,
secondaryAxes,
}}
/>
</ResizableBox>
)
}
</>
);
}
type PointsData = {
speed: number,
distance: number,
}
type Series = {
label: string,
data: PointsData[]
}
export const LineChart = ({ data }: { data: Activity }) => {
const Chart = dynamic(() => import("react-charts").then(mod => mod.Chart), { ssr: false })
const chartData: Series = {
label: "Test",
data: data?.records?.map(e => ({
speed: e?.Speed,
distance: e?.Distance
}))
}
const primaryAxis = React.useMemo(
(): AxisOptions<PointsData> => ({
getValue: datum => datum?.speed,
}),
[]
)
const secondaryAxes = React.useMemo(
(): AxisOptions<PointsData>[] => [
{
getValue: datum => datum?.distance,
},
],
[]
)
return (
<>
{
chartData && chartData?.data.length && primaryAxis && secondaryAxes && (<ResizableBox>
<Chart
options={{
data: chartData,
primaryAxis,
secondaryAxes,
}}
/>
</ResizableBox>
)
}
</>
);
}
1 Reply
quickest-silverOP•2y ago
I tried to print the chartData and it looks like this
Object { label: "Test", data: (3066) […]
data: Array(3066) [ {…}, {…}, {…}, …
[0…99]
0: Object { speed: 65535, distance: 0 }
1: Object { speed: 65535, distance: 0 }
2: Object { speed: 65535, distance: 0 }
3: Object { speed: 65535, distance: 0 }
4: Object { speed: 65535, distance: 0 }
5: Object { speed: 0, distance: 0 }
6: Object { speed: 65535, distance: 0 }
7: Object { speed: 65535, distance: 0 }
8: Object { speed: 5091, distance: 568 }
9: Object { speed: 5033, distance: 568 }
10: Object { speed: 5003, distance: 1049 }
Object { label: "Test", data: (3066) […]
data: Array(3066) [ {…}, {…}, {…}, …
[0…99]
0: Object { speed: 65535, distance: 0 }
1: Object { speed: 65535, distance: 0 }
2: Object { speed: 65535, distance: 0 }
3: Object { speed: 65535, distance: 0 }
4: Object { speed: 65535, distance: 0 }
5: Object { speed: 0, distance: 0 }
6: Object { speed: 65535, distance: 0 }
7: Object { speed: 65535, distance: 0 }
8: Object { speed: 5091, distance: 568 }
9: Object { speed: 5033, distance: 568 }
10: Object { speed: 5003, distance: 1049 }