Node JS | TypeError: Cannot read property 'p_nome' of undefined - node.js

Question

Good afternoon, I am new to react and node.js and I have a problem.
I have a table on a web page where you will receive the data for a trip. The columns (Id locales, name, date, time) are present in the travel_order model, but the column "localities name" is intended to list the name of the localities using the id. The ids for this location are listed in the "Localities Id" column. However, when listing, it gives me the error: "TypeError: Cannot read property 'designacao' of undefined".
For a better understanding of the table, in the first line of data, 1 is the departure id and 124 is the arrival id. I've uploaded a photo of the table as well as the controller and models.
the insertion of the data in the table is done in the function loadFillData () present in this code:
import React from 'react';
import '../../../assets/css/Pagamentos.css'
import 'js-datepicker/dist/datepicker.min.css';
import '../../../assets/css/bootstrap.css';
import axios from 'axios';
import { data } from 'jquery';
const datepicker = require('js-datepicker');
class Pagina extends React.Component {
constructor(props) {
super(props);
this.state = {
pag_pendentes: []
}
}
componentDidMount() {
const picker = datepicker('#calendario', {
formatter: (input, date, instance) => {
input.value = new Intl.DateTimeFormat('en-GB').format(date)
}
});
const url = "http://localhost:3001/operadora/pendente";
axios.get(url)
.then(res=>{
if(res.data.success){
const data = res.data.data;
this.setState({pag_pendentes:data});
}else{
alert("Erro");
}
})
.catch(error=>{
alert(error)
});
}
render() {
return (
<div>
<div id="div-filtragem">
<label className="Label_DatePicker">Data inicio:</label>
<input placeholder="Selecione uma data" type="text" id="calendario" className="form-control DatePicker datepicker" style={{ width: "auto" }} />
<label className="Label_DatePicker">Data fim:</label>
<input placeholder="Selecione uma data" type="text" id="calendario" className="form-control DatePicker datepicker" style={{ width: "auto" }} />
<button type="button" className="ButtonFilter ">Filtrar</button>
</div>
<div className="div_tabela">
<table className="table tabela" >
<thead>
<tr>
<th scope="col">IDs localidades</th>
<th scope ="col">nome localidades</th>
<th scope="col">Nome</th>
<th scope="col">Data</th>
<th scope="col">Hora</th>
<th scope="col">Valor</th>
</tr>
</thead>
<tbody>
{this.loadFillData()}
</tbody>
</table>
</div>
</div>
);
}
loadFillData(){
console.log(this.state.pag_pendentes);
return this.state.pag_pendentes.map((data, index) => {
return (
<tr key ={index}>
<td className="td_viagem">{data.partida + "-"+data.chegada}</td>
<td>{data.pp.designacao + "-"+data.pc.designacao}</td>
<td>{data.pessoa.p_nome + " " +data.pessoa.u_nome}</td>
<td>{data.data_viagem}</td>
<td>{data.hora_viagem}</td>
<td>10€</td>
</tr>
)
});
}
}
export default Pagina;
The controller:
var Viagem = require('../../model/viagem');
var Pedido_viagem = require('../../model/pedido_viagem');
var Estado = require('../../model/estado');
var Pessoa = require('../../model/pessoa');
var Partida = require('../../model/freguesias');
var Chegada = require('../../model/freguesias');
const sequelize = require('../../model/database');
const op_pagamentos = {}
sequelize.sync()
op_pagamentos.pendentes = async(req,res) => {
const data = await Pedido_viagem.findAll({
include: [Viagem],
include: [Estado],
include:[{
model: Partida,
as:'pp',
attributes:['designacao']
},
{model: Chegada,
as:'pc',
attributes:['designacao']}],
include: [{
model: Pessoa,
attributes:['p_nome', 'u_nome']}],
where:{
estado : "3",
},
order :[[ 'id', 'asc' ]],
})
.then(function (data) {
return data;
})
.catch(error => {
console.log('Erro: ' + error);
return error;
});
res.json({success: true, data: data});
}
module.exports = op_pagamentos;
model pedido_viagem:
var Sequelize = require('sequelize');
var sequelize = require('./database');
var Municipe = require('./pessoa');
var Estado = require('./estado_pedido');
var Partida = require('./freguesias');
var Chegada = require('./freguesias');
var pedido_viagem = sequelize.define('pedido_viagem',{
id:{
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true,
},
municipe:{
type: Sequelize.INTEGER,
references:{
model:Municipe,
key:'id'
},
allowNull:false // coloca variável NOT NULL
},
partida:{
type: Sequelize.INTEGER,
references:{
model:Partida,
key:'id'
},
allowNull:false // coloca variável NOT NULL
},
chegada:{
type: Sequelize.INTEGER,
references:{
model:Chegada,
key:'id'
},
allowNull:false // coloca variável NOT NULL
},
data_viagem: {
type:Sequelize.DATE,
allowNull:false // coloca variável NOT NULL
},
hora_viagem:{
type:Sequelize.TIME,
allowNull:false // coloca variável NOT NULL
},
aceita_partilha:{
type:Sequelize.INTEGER,
allowNull:false // coloca variável NOT NULL
},
necessidades_especiais: {
type:Sequelize.INTEGER,
allowNull:false // coloca variável NOT NULL
},
bagagem: {
type:Sequelize.INTEGER,
allowNull:false // coloca variável NOT NULL
},
estado:{
type:Sequelize.INTEGER,
references:{
model: Estado,
key:'id'
}
}
},
{
timestamps: false,
freezeTableName: true
});
pedido_viagem.belongsTo(Municipe,{foreignKey:'municipe'});
pedido_viagem.belongsTo(Partida,{as:'pp',foreignKey:'partida'});
pedido_viagem.belongsTo(Chegada,{as:'pc',foreignKey:'chegada'});
module.exports= pedido_viagem;
model freguesias:
var Sequelize = require('sequelize');
var sequelize = require('./database');
var tipo_freguesia = require('./tipo_frequesia');;
var freguesia = sequelize.define('freguesias',{
id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
designacao: {
type:Sequelize.CHAR(50),
allowNull:false // coloca variável NOT NULL
},
localizacao: {
type: Sequelize.CHAR(100),
allowNull:false // coloca variável NOT NULL
},
zona: {
type:Sequelize.INTEGER,
allowNull:false // coloca variável NOT NULL
},
tipo_freguesia:{
type: Sequelize.INTEGER,
regerences:{
model:tipo_freguesia,
key:'id'
},
allowNull:false // coloca variável NOT NULL
}
},
{
timestamps: false,
freezeTableName: true,
});
module.exports = freguesia;
Log file:
Node.js Log:
Please, thank you very much if anyone can help me. I am a beginner and I do not understand why I am getting this error.
Greetings to all.

Answer 1

The problem lies here:
include: [Viagem],
include: [Estado],
include:[{
model: Partida,
as:'pp',
attributes:['designacao']
},
{model: Chegada,
as:'pc',
attributes:['designacao']}],
include: [{
model: Pessoa,
attributes:['p_nome', 'u_nome']}]
You are overwriting include which will resolve to use only last one, instead you should use the include as an array:
include: [Viagem, Estado, {
model: Partida,
as:'pp',
attributes:['designacao']
},
{model: Chegada,
as:'pc',
attributes:['designacao']}, {
model: Pessoa,
attributes:['p_nome', 'u_nome']}]