Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
17 replies
thethingisback

Receiving an axios.post() request in app.js

This is my axios.post() sending my form's input.value to the server
const btn = document.querySelector('.submit-btn')
      const input = document.querySelector('.form-input')
      const formAlert = document.querySelector('.form-alert')
      btn.addEventListener('click', async (e) => {
        e.preventDefault();
        // console.log('form submitted')
        const nameValue = input.value

        try {
          const { data } = await axios.post('/api/people', { name: nameValue });

          
          const h5 = document.createElement('h5')
          h5.textContent = data.person
          result.appendChild(h5)
        } catch (error) {
          // console.log(error.response)
          formAlert.textContent = error.response.data.msg
        }
        input.value = ''
      })

In my app.js, when I set up the route to receive this axios.post() request, I destructure req.body into a name variable, and then attempt to console.log(name).

app.post('/api/people',(req, res)=>{

    const {name} = req.body;
    console.log(name) // <--- HERE
  
    const names = people.map(person=> person.name);

    if(names.includes(name)){
        res.status(201).send(`welcome ${name}`)
    } else{
        return res.status(401).send('that name is not recognized. Please provide recognized name');
    }
})


In the console though, I get undefined.

HOWEVER, when I have app.use(express.json()); in my app.js, I do see the 'name' value consoled.

Whether or not this app.use(express.json()); is included in my app.js though, I will see this name reflected in the "payload" tab and the res.status(201).send()/res.status(401).send() logic result in the devtools network "preview" tab.

character cut-off: My question will be in the first comment
Was this page helpful?