如何处理从 sequelize 的 .findAll(include: {all: true}) 发送的数据

Question

我在获取数组中的值时遇到了一些困难。在我的服务器端，我使用 sequelize 通过命令 include: {all: true} :

从我的表中获取我的值

router.get("/", async (req, res) => {
    const listOfGovernments = await GovernmentCreate.findAll({
        include: {all: true}
    });
    res.json(listOfGovernments);
});

请参阅下面发送给我的服务器的 Json 响应：

(2) [{…}, {…}]
0: {id: 1, createdAt: '2022-03-07T08:17:01.000Z', updatedAt: '2022-03-07T08:17:01.000Z', Justices: Array(1), Interieurs: Array(1), …}
1: {id: 2, createdAt: '2022-03-07T08:17:21.000Z', updatedAt: '2022-03-07T08:17:21.000Z', Justices: Array(1), Interieurs: Array(1), …}
length: 2
[[Prototype]]: Array(0)

如您所见，它在我的 Json 响应中发送了我的 Array (Justices: Array(1), Interieurs: Array(1), 等等...)。这是因为我的表 Justices 和 Interieurs 与我的主表相关联：

(2) [{…}, {…}]
0:
AffaireEtrangeres: [{…}]
Agricultures: [{…}]
Armees: [{…}]
Cultures: [{…}]
Ecologies: [{…}]
EconomieFinances: [{…}]
EducationNationales: [{…}]
Interieurs: [{…}]
Justices: [{…}]
OutreMers: [{…}]
Santes: [{…}]
Sports: [{…}]
Travails: [{…}]
createdAt: "2022-03-07T08:17:01.000Z"
id: 1
updatedAt: "2022-03-07T08:17:01.000Z"
[[Prototype]]: Object
1: {id: 2, createdAt: '2022-03-07T08:17:21.000Z', updatedAt: '2022-03-07T08:17:21.000Z', Justices: Array(1), Interieurs: Array(1), …}
length: 2
[[Prototype]]: Array(0)

我点击我的表格 Justices 和 Interieurs attibutes 以查看服务器发送给我的更多信息。它们包含 firstName、LastName 和其他信息。这是正常的，因为它是我创建数据库时入口的数据：

(2) [{…}, {…}]
0:
AffaireEtrangeres: [{…}]
Agricultures: [{…}]
Armees: [{…}]
Cultures: [{…}]
Ecologies: [{…}]
EconomieFinances: [{…}]
EducationNationales: [{…}]
Interieurs: Array(1)
0: {id: 1, firstName: 'interieur', lastName: 'interieurNom', createdAt: '2022-03-07T08:17:01.000Z', updatedAt: '2022-03-07T08:17:01.000Z', …}
length: 1
[[Prototype]]: Array(0)
Justices: Array(1)
0: {id: 1, firstName: 'justice', lastName: 'justiceNom', createdAt: '2022-03-07T08:17:01.000Z', updatedAt: '2022-03-07T08:17:01.000Z', …}
length: 1
[[Prototype]]: Array(0)
OutreMers: [{…}]
Santes: [{…}]
Sports: [{…}]
Travails: [{…}]
createdAt: "2022-03-07T08:17:01.000Z"
id: 1
updatedAt: "2022-03-07T08:17:01.000Z"
[[Prototype]]: Object
1: {id: 2, createdAt: '2022-03-07T08:17:21.000Z', updatedAt: '2022-03-07T08:17:21.000Z', Justices: Array(1), Interieurs: Array(1), …}
length: 2
[[Prototype]]: Array(0)

所以，我的问题是： 我该如何添加每个属性的 firstName 和 lastName 值 （正义， Interieurs 等...） 来自我的索引 0... en 函数 .map() 或 .forEach() （或其他任何...） 在 span 标签中？然后，对索引 1、索引 2 等重复此操作...

我花时间问这个问题，因为我花了一整天的时间来寻找好东西，但没有成功。我希望有人能帮助我。

import React from 'react';

const exemple = () => {
    return (
        <div>
            { //myJsonResponse.map() or .forEach() => {
                (
                    <div>
                        <span>
                            //Span tag that containe value of firstName from attribut Justice[i] from index[i]
                        </span>
                        <span>
                            //Span tag that containe value of lastName from attribut Justice[i] from index[i]
                        </span>
                    </div>
                )
            )};
        </div>
    );
};

export default exemple;

*************** Sumanth Madishetty 的回答 ****************

为了回答下面的命题，我做了 console.log() :

{governmentList.map((responseItem) => {
                console.log(responseItem)
                return Object.values(responseItem).map((i) => {
                    console.log(i)
                    console.log(i[0])
                    return (
                        <div>
                            <span>{i[0].firstName}</span>
                            <span>{i[0].lastName}</span>
                        </div>
                    )
                });
            }
            )};

我的控制台显示：

Answer 1

根据我对你的要求的了解，你可以试试这个

假设您在变量 response

中有响应

response.map((responseItem) => {
  return Object.values(responseItem).map((i) => {
    // Object.values returns the value of each item in the object like [{firstName: "", ...}, { "firstName": "" }] here the firstname in the first element will be of Justices, 2nd will be of sports etc, according to your response
    return (
      <div>
      <span>
          {i[0].firstName}
      </span>
      <span>
      {i[0].lastName}
      </span>
  </div>
    )
  })
})

请仔细阅读codesandbox以便更好地理解https://codesandbox.io/s/cranky-bardeen-m0dhzw?file=/src/App.js

Answer 2

我以@SumanthMadishetty 为例找到了解决方案。就我而言，我必须在我的属性之前添加 ?，因为在某些情况下我的 firstName 或 lastName 不存在。检查下面的代码：

{governmentList.map((responseItem) => {
                    return Object.values(responseItem).map((i) => {
                        return (
                            <div>
                                <span>{i[0]?.firstName}</span>
                                <span>{i[0]?.lastName}</span>
                            </div>
                        )
                    });
                }
                )};

如何处理从 sequelize 的 .findAll(include: {all: true}) 发送的数据

How process data send from a .findAll(include: {all: true}) of sequelize

reactjs

foreach

sequelize.js

array.prototype.map