Wsrtjtyk

I don't get how I'm setting a header after it is sent to client?

code: During form submission a post ajax request is made, the response is a json object that is returned to the client.

I am commented out most of the code to find out why, at this point I am only doing one res.json() after a post request is made. I don't understand at what point I am RE-SETTING the header/ or returning a reponse twice?

YET I get this error:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

    at ServerResponse.setHeader (_http_outgoing.js:470:11)

    at ServerResponse.header (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/express/lib/response.js:767:10)

    at ServerResponse.send (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/express/lib/response.js:170:12)

    at done (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/express/lib/response.js:1004:10)

    at Object.exports.renderFile (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/pug/lib/index.js:412:12)

    at View.exports.__express [as engine] (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/pug/lib/index.js:455:11)

    at View.render (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/express/lib/view.js:135:8)

    at tryRender (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/express/lib/application.js:640:10)

    at Function.render (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/express/lib/application.js:592:3)

    at ServerResponse.render (/home/shahyan/Videos/FrontendProject-masters/notes-js/beginner/js-fundamentals-functional/todoApp/node_modules/express/lib/response.js:1008:7)

index.js

var express = require('express');

var router = express.Router();



let users = ;







/* GET home page. */

router.get('/', function(req, res, next) {



  res.render('index', { title: 'Express' });

});



router.post('/', function(req, res, next) {

  // check post valued are true

  if(req.body.fname && req.body.list_name && req.body.list_date) {

    // try {

       addNewUser(req.body);

       res.json({

         "message":"Successfully signed up!",

         "userName": req.body.fname,

         "userDate": req.body.list_date

        });

    // } catch(e){

      // signup failed

      // res.json(res.status(status).json(obj), "Sign up failed...");

    // }

   }

  //  if(req.body.list_item) {

  //    console.log(req.body.list_item);

  //  }

   console.log(body.req);



});

module.exports = router;



function addNewUser(data) {

  try {

    users.push(

      {

        "fname":data.fname,

        "list_name": data.list_name,

        "list_date": data.list_date

      }  

    );  

  } catch(e) {

    console.log("Failed to add user ", e);

      throw e;

  }



}

myscript.js --- front end client side client

document.getElementById("createNewList").addEventListener('submit', function(e) {

    e.preventDefault();



    // serialize form to convert into JSOn object

    let form_data = formSerialize(document.getElementById("createNewList"));



     // AJAX fetch()

    fetch('/', {

        method: 'POST',

        headers: {

            "Content-Type": "application/json; charset=utf-8",

            // "Content-Type": "application/x-www-form-urlencoded",

        },

        body: form_data

    })

    .then(function(response) {      

         if(response.ok)

            return response.json();

    })

    .then(function(user_json) {

        console.log(user_json);



        console.log(user_json);

        create_todays_todo_list(user_json);

    });

});



// add event listener of the to do list i.e. adding tasks deleting tasks, completed tasks

// document.getElementById("toDoList_form").addEventListener('submit', function(e) {

    // e.preventDefault();

    // console.log("clikeddddddddd");

    // // AJAX send added task to server

    // let list_item = document.getElementById("list_item").innerHTML;

    // let user = document.getElementById("user_name_heading").innerHTML;

    // let data = {"user": user, "list_item": list_item}

    // console.log(data);

         // AJAX fetch()

        //  fetch('/', {

        //     method: 'POST',

        //     headers: {

        //         "Content-Type": "application/json; charset=utf-8",

        //         // "Content-Type": "application/x-www-form-urlencoded",

        //     },

        //     body: data

        // })

        // .then(function(response) {

        //      if(response.ok)

        //         return response.json();

        // })

        // .then(function(retrievedItemsFromServer) {

        //     console.log(retrievedItemsFromServer);

        // });



    //

// });





/// functionssss

// serialize form function

function formSerialize(form) {

    var input = form.getElementsByTagName("input");

    var formData = {};

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

      formData[input[i].name] = input[i].value;

    }

    return formData = JSON.stringify(formData);

  }

function create_todays_todo_list(user_json) {

    // 1. hide the create list form  form

    document.getElementById("createNewList").style.display="none";



    // 2. display the to do list div

    document.getElementById("toDoList").style.display="flex";



    // 3. display the user's name and date as logged in on the page

    document.getElementById("user_name_heading").innerHTML = user_json.userName;

    document.getElementById("user_date_signup_heading").innerHTML = user_json.userDate;



}

console.log(body.req); this is wrong. It should be console.log(req.body);. This generally happens when the program exited but still, there is a function callback in the stack. This should fix your problem. If it didn't please share the console log if printed any