反应将数据库数据转换为对象

时间:2021-03-01 21:29:53

标签: javascript reactjs mongodb antd

我正在使用 React 和 node js 创建一个简单的网站。我从我的 mongo db 数据存储加载数据。我正在使用 ant design 在我的网站上绘制图形。

我正在尝试从 @ant-design/charts 和示例中绘制图形,它需要如下数据。

import React from 'react';
import { Line } from '@ant-design/charts';
const Page: React.FC = () => {
  const data = [
    { year: '1991', value1: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];
  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
    label: {
      style: {
        fill: '#aaa',
      },
    },
  };
  return <Line {...config} />;
};
export default Page;

我要加载的数据如下。

enter image description here

我已成功加载数据,但在网站上显示失败。 这里是我的问题,我怎样才能将我加载的数据,也就是数组,变成蚂蚁设计想要我这样做的形式......?

这是我用来从 mongo db 加载数据的代码。

  const [ readPageList, setReadPageList ] = useState([]);
  var bookId = "60219f2a03fdf00d5cf4051d" 

  useEffect(()=>{
    axios.get('/api/books/GetBookById/'+bookId)
    .then( response => {
      setReadPageList(response.data.book.dailyPage);
    })
  },[])

  const dataList = readPageList.map((pages,index) => {
    return [JSON.stringify({year:index, value:pages.readPage})]


  })

所以我尝试在蚂蚁设计图中使用dataList而不是data

谢谢

1 个答案:

答案 0 :(得分:0)

首先,您检查可以使用的数据类型:

console.log(typeof data)

如果它显示字符串,您可以简单地将其转换为对象:

JSON.parse(data) // it will convert data to object

如果不是,您可以尝试将其转换为字符串并转换回对象,如下面的代码:

JSON.parse(JSON.stringify(data))

也许你可以把代码写在下面:

...
if ( typeof data === `string` )
   data = JSON.parse(data)
...