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

I have some difficulties to get value in my array. On my server side, I use sequelize to get my value from my tables with the command include: {all: true} :

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

See below the Json response that send my server :

(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)

As you can see, it send my Array in my Json response (Justices: Array(1), Interieurs: Array(1), etc...). It is because my tables Justices and Interieurs are associates with my main tables :

(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)

I click on my tables Justices and Interieurs attibutes to watch more informations that the serve send to me. They containes firstName, LastName and other informations. That is normal because it is the data in entrance when I created my data base :

(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)

So, my question is : how I can do to add firstName and lastName value of each attributs (Justices, Interieurs, etc...) from my index 0... with en function .map() or .forEach() (or anything else...) in a span tag ? Then, repeat this action for index 1, index 2, etc...

I take time to asking this question because I spent all my day to find the good wath without success. I hope someone will help me.

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;

*************** Answer to Sumanth Madishetty ****************

To answer of the proposition below I did a 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>
                    )
                });
            }
            )};

And my console show me :

CodePudding user response：

According to my understanding of your requirement you can try this

Assuming you have response in variable 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>
    )
  })
})

Please go through the codesandbox for better understanding https://codesandbox.io/s/cranky-bardeen-m0dhzw?file=/src/App.js

CodePudding user response：

I find the solution with the exemple of @SumanthMadishetty. In my case, I have to add ? before my properties because I have some case where my firstName or lastName doesn't exist. Check the code below :

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