javascript - 节点 js Javascript 对象显示在 HTML 正文中，但不在终端和控制台中

问题描述

几天来，我一直在用头撞墙，而且我越来越近，但我并不完全在那里。我正在上一门在线课程，并试图从课程视频中复制一个示例项目。问题是代码在视频中有效，但他们向您展示的代码完全错误并且缺少各种关键组件。

到目前为止，我所拥有的是一个提交对象的 fav 元素的表单。当我转到页面时（在提交表单之前），我可以在控制台和终端中看到：

  {
    animal: 'lion',
    fact: "a lion's roar can be heard five miles away",
    fav: {}
  }

所以它正确地从 /fakeAnimalData 调用数据。当我提交表单时，我得到了三分之二的对象（再次），然后是另一个带有 fav 元素的对象。我需要将这两个对象合并为一个，但代码没有这样做。

[{"animal":"lion","fact":"a lion's roar can be heard five miles away","fav":{}},{"fav":"lions are big"}]

控制台中没有显示任何内容。在终端我只得到：

{ animal: undefined, fact: undefined, fav: 'lions are big' }

另一个更小的问题是，在视频中，对象没有出现在 HTML 的正文中。表单保留在那里，对象仅显示在控制台和终端中。我认为这是因为我的路线设置不正确，但我不确定。截至目前，对象替换了表单，我仍然希望看到表单并且只在控制台和终端中看到完整的对象。

我希望我解释正确。这是我的代码：

server.js：

projectData = {};

/* Express to run server and routes */
const express = require('express');

/* Start up an instance of app */
const app = express();

/* Dependencies */
const bodyParser = require('body-parser')
/* Middleware*/
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
const cors = require('cors');
app.use(cors());

/* Initialize the main project folder*/
app.use(express.static('project1'));

const port = 8000;
/* Spin up the server*/
const server = app.listen(port, listening);
 function listening(){
    // console.log(server);
    console.log(`running on localhost: ${port}`);
  };

// GET route

const animalData = [];
const fakeData = {animal: "lion", fact: "a lion's roar can be heard five miles away"};

app.get('/fakeAnimalData', getFakeData);

function getFakeData(req, res) {
  console.log(fakeData);
  res.send(fakeData);
};

app.get('/all', getData);

function getData(req, res){
  res.send(animalData)
  console.log(animalData)
}

// function sendData (request, response) {
//  response.send(projectData);
// };

// POST route
app.post('/add', callBack);

function callBack(req,res){
  res.send('POST received');
}



// POST an animal
const data = [];


  // TODO-Call Function

app.post('/addAnimal', addAnimal);

app.route('/')
  .get(function (req, res) {
    res.sendFile('index.html', {root: 'project1'})
  })
  .post(addAnimal)

//app.route('/addAnimal')
//  .get(function (req, res) {
//    res.sendFile('index.html', {root: 'project1'})
//  })
//  .post(addAnimal)

function addAnimal(req, res){

  newEntry = {
    animal: req.body.animal,
    fact: req.body.fact,
    fav: req.body.fav
  }

  //data.push(req.body);
//  res.status(200).send(req.body);
  animalData.push(newEntry)
  res.send(animalData)
  console.log(animalData)
};

应用程序.js：

function performAction(e){
const fav = document.getElementById('fav').value;

getAnimal('/fakeAnimalData')
.then(async function(data){
    console.log(data);
  let res = await postData('/addAnimal', {animal: data.animal, fact: data.fact, fav: fav});
  console.log(res);
});
};

const getAnimal = async (url) =>{
  const res = await fetch(url);
  try {
    const data = await res.json();
    console.log(data)
    return data;
  } catch(error) {
    console.log()
  }
};

/* Function to POST data */
const postData = async ( url = '', data = {})=>{
    console.log(data);
      const response = await fetch(url, {
      method: 'POST', // *GET, POST, PUT, DELETE, etc.
      credentials: 'same-origin', // include, *same-origin, omit
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify(data), // body data type must match "Content-Type" header        
    });

      try {
        const newData = await response.json();
        console.log(newData);
        // console.log(newData);
        return newData
        console.log(await response.json());
        return await response.json()
      }catch(error) {
      console.log("error", error);
      // appropriately handle the error
      };
  };

  // TODO-Call Function
getAnimal('/fakeAnimalData')
.then(async function(data){
    console.log(data);
  let res = await postData('/addAnimal', {animal: data.animal, fact: data.fact, fav: fav});
  console.log(res);
});

我觉得我很接近，但碎片没有融合在一起。我无法开始告诉你我会多么感激你能给我的任何指导。

谢谢，迈克

标签： javascriptnode.jsexpress

javascript - 节点 js Javascript 对象显示在 HTML 正文中，但不在终端和控制台中

问题描述

解决方案

推荐阅读