Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Undefined input value

Bom dia, estou seguindo as aulas do curso, mas ao editar meu formulário apresenta "undefined" nos campos de value

<div>
            <label for="titulo">Titulo:</label>
            <input type="text" id="titulo" name="titulo" placeholder="Coloque titulo do livro" value="${data.livro.titulo}">
        </div>
7 respostas

Oi Diego,

Pode postar o form.marko rotas.js e o custom-express.js pra gente dar uma olhada ?

form.marko

<html>
<head>
    <title>Cadastro de livros</title>
</head>
<body>

    <h1>Cadastro de livros</h1>


   <form method="post" action="/livros">


        <div if(data.livro.id)>
            <input  type="hidden"  name="_method" value="PUT">
            <input  type="hidden"  name="id" id="id" value="${data.livro.id}">
        </div>

        <div>
            <label for="titulo">Titulo:</label>
            <input type="text" id="titulo" name="titulo" value="${data.livro.titulo}" placeholder="Coloque titulo do livro" >
        </div>

        <div>
            <label for="preco">Preço:</label>
            <input type="text" id="preco" name="preco" placeholder="Preço" value="${data.livro.preco}">
        </div>

        <div>
            <label for="descricao">Descrição:</label>
            <textarea cols="20" row="10" id="descricao" name="descricao">${data.livro.descricao}</textarea>
        </div>


       <input type="submit" value="Salvar">     
    </form>

</body>
</html>

rotas.js

const LivroDao = require("./../infra/livro-dao");
const db = require("./../../config/database");

module.exports = app => {
  app.get("/", (req, res) => {
    res.send(`
            <html>
                <head>
                <meta charset="utf-8">    
                <title>NodeJS</title>
                <meta name="description" content="NodeJS">
                <meta name="author" content="dlottermann">
                </head>    
                <body>
                    <h1>Home</h1>
                </body>
                </html>`);
  });

  app.get("/livros", (req, res) => {
    const livroDao = new LivroDao(db);

    livroDao
      .lista()
      .then(livros => {
        res.marko(require(`../views/livros/lista/lista.marko`), {
          livros
        });
      })
      .catch(erro => console.log(erro));
  });

  app.get(`/livros/form`, (req, res) => {
    res.marko(require(`../views/livros/form/form.marko`),{livro:{}});
  });

  //Insert
  app.post("/livros", (req, res) => {
    const livroDao = new LivroDao(db);

    livroDao
      .adiciona(req.body)
      .then(res.redirect(`/livros`))
      .catch(erro => console.log(erro));
  });

  //remove
  app.delete(`/livros/:id`, (req, res) => {
    const livroDao = new LivroDao(db);

    livroDao
      .remove(req.params.id)
      .then(() => res.status(200).end())
      .catch(erro => console.log(erro));
  });

  //edit
  app.get(`/livros/form/:id`, (req, res) => {
    const livroDao = new LivroDao(db);

    livroDao
      .buscaPorId(req.params.id)
      .then(livro => {
        res.marko(require(`../views/livros/form/form.marko`), 
          {livro:livro}
        );
      })
      .catch(erro => console.log(erro));
  });

    //Save Edit
    app.put("/livros", (req, res) => {
        const livroDao = new LivroDao(db);

        livroDao
          .atualiza(req.body)
          .then(res.redirect(`/livros`))
          .catch(erro => console.log(erro));
      });


};

custom-express.js

require("marko/node-require").install();
require("marko/express");

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const routes = require("./../app/routes/routes");
const methodOverride = require('method-override');

app.use(
  bodyParser.urlencoded({
    extended: true
  })
);

app.use('/estatico',express.static('src/app/public'));

app.use(methodOverride(function (req, res) {
  if (req.body && typeof req.body === 'object' && '_method' in req.body) {
    // look in urlencoded POST bodies and delete it
    var method = req.body._method
    delete req.body._method
    return method
  }
}))

//Parameter app to function routes exports
routes(app);

module.exports = app;

Funciona tudo normalmente, mas fica o undefined em um novo cadastro

Boa noite, Diego! Como vai?

Eu dei uma olhada no código que vc postou e me pareceu estar correto. Vc poderia compartilhar o seu projeto via github, dropbox ou google drive e mandar o link aqui? Daí eu poderei dar uma olhada melhor no que está acontecendo!

Obs.: Não esqueça de remover a pasta node_modules antes de compartilhar o projeto.

Bom dia, tudo certo e com você?

Segue o link do projeto finalizado e compactado:

https://github.com/dlottermann/nodejs-studies/blob/master/alura-01/nodejs-studies.tar.gz

solução!

Boa tarde, Diego! Como vai?

Abri seu projeto aqui e constatei o comportamento que vc relatou! No entanto, eu percebi que vc não está utilizando as dependências do projeto nas versões indicadas por mim durante o curso. Daí eu modifiquei o package.json para utilizar as versões indicadas por mim no curso, apaguei a pasta node_modules e o package-lock.json, reinstalei as dependências com npm install, reiniciei o projeto com npm start e tudo funcionou! Esse problema deve se dever a alguma atualização que uma das dependências recebeu após o lançamento do curso, tendo assim mudado a forma de se comportar. Portanto, sugiro fortemente que vc siga as versões indicadas por mim para que problemas como esse não ocorram e vc possa seguir em frente com o curso numa boa!

Segue como ficou o package.json do seu projeto!

{
  "name": "alura-01",
  "version": "1.0.0",
  "description": "Projeto do curso 01 de nodejs",
  "main": "server.js",
  "scripts": {
    "test": "",
    "start": " nodemon server.js --ignore *.marko.js"
  },
  "author": "dlottermann",
  "license": "MIT",
  "dependencies": {
    "body-parser": "1.18.3",
    "express": "4.16.3",
    "marko": "4.13.4-1",
    "method-override": "^3.0.0",
    "multer": "1.4.0",
    "sqlite3": "4.0.2"
  },
  "devDependencies": {
    "nodemon": "1.18.4"
  }
}

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Obrigado pelo retorno vou seguir a orientação

Por nada, Diego! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos, meu aluno!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software