从 Python 数据帧解析 JSON 到 React FE

Question

我很难从后端解析 Pandas 数据帧到 React 前端

我在 python BE 中创建以下内容：

dataB = pd.DataFrame()
    for i in range(len(date)):
        dataB[i]=pd.Series({'fileName': name_[i], 'content': content[i], 'date': date[i]})
        
    return dataB

然后我在烧瓶中通过 GET 方法发送它 Api

@app.route('/app4', methods=['GET'])
def ListPrint3():
    df = dataFrameFromPythonBE
    df1 = df.to_json() 
    return df1

当我在显示组件中使用以下代码 console.log 时，会产生以下内容（为简洁起见进行了简化）：

useEffect(() => {
        fetch('/app4').then(
            response=> {
                if (response.ok){
                    return response.json()
                }
            }
        ).then(data => console.log(data))
    },[])

#Yields the DataFrame below

1: {fileName: 'C.V. Alice Scotti. - Copia.Pdf', content: `dausdhiauhdiaushd`, date: 1483999986000}
2: {fileName: 'C.V. Alice Scotti..Pdf', content: `suhdaiudhaiudiauhdaiushd `, date: 1483999986000}
3: {fileName: 'Cv Alice Palladino-Signed - Copia - Copia.Pdf', content: `asdadfgaread`,date:...etc

我试图在我的 React 前端显示它，但我很难解析它 and/or 在循环中显示它，作为 Pandas 数据框不会总是相同的长度

我不知道我是否应该以不同的方式构建它。每当我尝试使用 data.fileName、data.content 等来解析它时，它似乎 return 什么都没有。

你们会怎么做？

PS 我还尝试将 Dataframe 打包为：

{fileName: {…}, content: {…}, date: {…}}
content: {0: `aisjaoifjeifjaoifjaoiwfjawif', 1:'asfasfafafafasfassdtdhwaeefd', 2 .....etc}
date: {0: 1483999986000, 1: 1483999986000, 2: 1483999986000 .....etc}
fileName: {0: 'C.V. Alice Scotti. - Copia - Copia.Pdf', 1: 'C.V. Alice Scotti. -.....etc }

这显然结构不同，所以我猜解析也应该不同...

Answer 1

我设法为可能感兴趣的人解决了这个问题

问题是，当我使用 .to_json() 将数据框变成 Json 时，我没有使用它的“东方”选项

@app.route('/app4', methods=['GET'])
def ListPrint3():
    df = dataFrameFromPythonBE
    df1 = df.to_json(orient='records') 
    return df1

这使得在显示时使用 df.fileName、df.content 等方式对其进行切片变得非常容易

从 Python 数据帧解析 JSON 到 React FE

Parsing a JSON from Python Dataframe to React FE

python

frontend

json

pandas

reactjs