HTTP request using RAW/JSON Angular 7

Question

Good afternoon, I’ve tried almost everything but I can’t do a POST at the angle using a list, always returns error 500. This is the Component call.

ngOnInit() {
    let CSVProduto: Array<CSVProduto> = [
      {nome: "Lucas", sobrenome: "Rodrigues" , idade: "22" },
      {nome: "Lucas", sobrenome: "Silva" , idade: "25" }
    ];
    this.produtoService.uploadCSV(CSVProduto).subscribe(res => window.alert("Dados inseridos com sucesso")
    )
  }

That’s the call for the service.

uploadCSV(CSVProduto: Array<CSVProduto>) {
    console.log(CSVProduto)
    return this.httpClient.post(this.urlUpload, CSVProduto, this.httpOptions)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }

And that’s the API code

exports.importCSV = (req,res) => {
    try {

        const produto = []
        
        for(var i = 0; i < req.body.CSVProduto.length; i++){

            produto.nome                   = req.body.CSVProduto[i].nome;
            produto.sobrenome              = req.body.CSVProduto[i].sobrenome;
            produto.idade                  = req.body.CSVProduto[i].idade;

            const sqlQry = 'insert into teste (nome,sobrenome,idade) values (?,?,?)'
            
            connection.query(sqlQry,[produto.nome,produto.sobrenome,produto.idade], (err,result)=>{
                
                if(err){
                    try {
                        console.log(err)
                        return res.status(500).json({"message": + err})           
                    } catch (error) {}
                     
                }else{
                    try {
                        return res.status(201).json({"message": result.insertId + " - Dados inseridos com sucesso!"})
                    } catch (error){}
                }
            })
        }
    } catch (error) {
        return res.status(500).json({"message":"Internal Server Error"})
    }
}

Using Postman works normal, with this body

I’m sorry, but I don’t know what I’m doing wrong, I’ve researched and I’ve tried almost everything. Someone could help? :/

Answer 1

Hello,

So by analyzing your code the object you’re building is different from the object you’re sending via post at the angle.

This is the object you are sending via Postman

{
    "CSVProduto": [
        {
            "nome": "AAAA",
            "sobrenome": "teste",
            "idade": "32"
        },
        {
            "nome": "AAAA",
            "sobrenome": "teste",
            "idade": "25"
        }
    ]
}

and that’s the code you’re generating in the angular code

[
    {
        "nome": "AAAA",
        "sobrenome": "teste",
        "idade": "32"
    },
    {
        "nome": "AAAA",
        "sobrenome": "teste",
        "idade": "25"
    }
]

There are two ways of correcting either at the angle or on the server, on the server it is more "simple" where the chunk of code you have

...
for(var i = 0; i < req.body.CSVProduto.length; i++){

            produto.nome                   = req.body.CSVProduto[i].nome;
            produto.sobrenome              = req.body.CSVProduto[i].sobrenome;
            produto.idade                  = req.body.CSVProduto[i].idade;
...

just remove the "Csvproduto"

...
for(var i = 0; i < req.body.length; i++){

            produto.nome                   = req.body[i].nome;
            produto.sobrenome              = req.body[i].sobrenome;
            produto.idade                  = req.body[i].idade;
...

or else correct the angular code creating the object like this:

therefore:

let CSVProduto: Array<CSVProduto> = [
    { nome: "Lucas", sobrenome: "Rodrigues", idade: "22" },
    { nome: "Lucas", sobrenome: "Silva", idade: "25" }
];
...
uploadCSV(CSVProduto: Array<CSVProduto>) 

therefore:

let CSVProduto: any =
{
    "CSVProduto": [
        { nome: "Lucas", sobrenome: "Rodrigues", idade: "22" },
        { nome: "Lucas", sobrenome: "Silva", idade: "25" }
    ]
}
...
uploadCSV(CSVProduto: any) 

hope I’ve helped.