node.js - JavaScript アラート応答: [オブジェクト応答] as res.json

okwaves2024-01-25  184

簡単なログイン/サインアップを行うのに多少の困難がありましたが、フェッチサインアップとログインの両方のalert()で応答が表示されます: [オブジェクト応答]。 console.log(JSON.stringify(res.json())); を試みました。しかし、これはコンソールに何も表示されませんでした。ご協力をよろしくお願いいたします。

const express = require("express");
const router = express.Router();
const db = require("../../mongo").db();
const validate = require("../../validation");
const { password } = require("../../validation");

router.post("/register", (req, res) => {
res.json({success: true})
 console.log(JSON.stringify(req.body));
  let { username, password } = req.body;
  let err = validate.username(username);
  if (err) throw err;
  err = validate.password(password);
  if (err) throw err;
  db.collection("users").find({ username: username }),
    function (err, username) {
      if (err) {
        throw err;
      }
      if (username) {
        console.log(username);
        console.log("Username in use!");
      } else {
        console.log("Not in use!");
        db.collection("users").insertOne({
          username: username.value,
          password: password.value,
        });

      }
    };
    
});

router.post("/login", (req, res) => {
  console.log(JSON.stringify(req.body));
  let { username, email, password } = req.body;
  db.collection("users").find({ username: username, password: password }),
    function (err, results) {
      if (err) {
        res.status(500).json({errorMsg: err.message}) ;
      }
      if (results.length > 0) {
        res.json({"Login successful": username, password});
      } else {
        res.status(401).json({errorMsg: "Incorrect username and/or password"});
      }
    };
});

module.exports = router;





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebServer</title>
    <script>
        function register() {
            let data = { 
                username: document.querySelector("#user").value,
                password: document.querySelector("#pass").value,
            }
            fetch("/api/register", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data),
            
            }).then((res) => {
                console.log(JSON.stringify(res.json()));
                alert("response: " + res)
            }).catch((err) => {
                throw(err)
            });
        }
        function login() {
            let data = { 
                username: document.querySelector("#userlogin").value,
                password: document.querySelector("#passlogin").value,
            }

        fetch("/api/login", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data),
            }).then((res) => {
                console.log(res.json());
                alert("response: " + res)
            }).catch((err) => {
                throw(err)
            });
        }

        
    </script>
</head>
<body>
    <h1>Register:</h1>
   
    <input autocomplete="username" id = "user" placeholder="username">
    <input autocomplete="current-password" id = "pass" type = "password "placeholder="password">
    <button onclick="register()">Register</button>
    <br>
    <br>
    <br>
    <br>
    <input autocomplete="username" id = "userlogin" placeholder="username">
    <input autocomplete="current-password" id = "passlogin" type = "password" placeholder="password">
    <button onclick="login()">Login</button>

    


</body>
</html>

暗黙的な toString() を使用してオブジェクトを文字列化すると、その型だけが表示され、内容は表示されません。

– JavaScript

2020 年 9 月 3 日 12:03



------------------------

res はオブジェクトであり、アラートは暗黙的に toString() メソッドを呼び出します。そのため、アラートには「[オブジェクトの応答]」と表示されます。

res.json() は非同期です (ドキュメント)。したがって、応答本文を使用したい場合は、何らかの方法で res.json() または res.json().then(data => ...) を待つ必要があります。

あなたの場合、これは次のようになります。

   fetch("/api/login", {
        method: "POST",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
    }).then((res) => {
        return res.json();
    }).then((data) => {
        console.log(JSON.stringify(data));
    }).catch((err) => {
        throw(err)
    });
    

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。