Доступ к возвращенным свойствам объекта с маршрутизатора

#node.js #reactjs #mongodb #express #mongoose

#node.js #reactjs #mongodb #экспресс #мангуст

Вопрос:

Я запускаю свой сервер с помощью nodemon, который запускает сервер на localhost 8080

Я перехожу на localhost: 8080 / api, который возвращает:

[{"date":"1587946153337","_id":"5ea622b6334c4de9fa307b20","post":"This is the first post!","__v":0},{"date":"1603312852793","_id":"5f909d49d75c9b1ec2e39ee7","post":"this is a test","__v":0},{"date":"1603313042345","_id":"5f909dea89eeee2d40e933c6","post":"this is a second test post","__v":0},{"date":"1603483744050","_id":"5f9338b12e575d3935b0b16b","post":"hiiii","__v":0},{"date":"1603483572093","_id":"5f9338b264236f36c48c3a60","post":"e","__v":0},{"date":"1604349323678","_id":"5fa06dcd59aeeba1e1845c0f","post":"was","__v":0}]

Как я могу получить доступ к возвращаемым свойствам? Например, я хочу отобразить свойство post как HTML.

Объект, который, по-видимому, содержит свойства, находится data из api.js

 const router = express.Router();
const mongoose = require('mongoose');
const https = require("https");

const Post = require('../models/post');  // This is the model to use

// Routes
router.get('/', (req, res) => {
    Post.find( {  })
        .then((data) => {
            console.log('Data: ', data);
            const log = res.json(data);
            //console.log(log);
        })
        .catch((error) => {
            console.log('Error: ', daerrorta);  
        });
});
  

Вот мой server.js

 const express = require('express');
const mongoose = require('mongoose');
const morgan = require('morgan');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 8080;

const routes = require('./routes/api');

const postString = "test";
const commentString = "test";
const profString = "test";
const univString = "test";

// MONGODB ACCOUNT INFO:
// Usermame: MyCampusAdmin
// Password: AdminForMyCampus

// MongoDB URI
const MONGODB_URI = 'mongodb srv://MyCampusAdmin:AdminForMyCampus@mycampus-whyic.mongodb.net/MyCampus?retryWrites=trueamp;w=majority';

mongoose.connect(MONGODB_URI || 'mongodb://localhost/MyCampus', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

mongoose.connection.on('connected', () => {
    console.log('Mongoose is connected');
});

// Data parsing
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// HTTP request logger
app.use(morgan('tiny'));
app.use('/api', routes);

//function makePost(p) {
    // p = postString;

    // postData
    // const postData = {
    //     post: p,
    //     univID: 1,
    //     numLikes: 0
    // };

    // Post Save
    // const newPost = new Post(postData);  // Instance of the new model

    // Post Save
    //  newPost.save((error) => {
    //      if (error) {
    //          console.log('Something went wrong with post save');
    //      }
    //      else {
    //          console.log('Post data has ben saved');
    //      }
    //  });
//}

function makeComment(c) {
    c = commentString;

    // commentData
    const commentData = {
        comment: c,
        postID: 1,
        numLikes: 0
    };

    // Comment Save
    const newComment = new Comment(commentData);

    // Comment Save
    newComment.save((error) => {
        if (error) {
            console.log('Something went wrong with comment save');
        }
        else {
            console.log('Comment data has ben saved');
        }
    });
}

function addProf(pr) {
    pr = profString;

    // profData
    const profData = {
        name: pr, 
        univID: 1,
        department: "SE",
        classes: "Applied Research"
    };

    // Prof Save
    const newProf = new Prof(profData);

    // Prof Save
    newProf.save((error) => {
        if (error) {
            console.log('Something went wrong with prof save');
        }
        else {
            console.log('Prof data has ben saved');
        }
    });
}

function addUniv(u) {
    u = univString;

    // univData
    const univData = {
        university: u
    };

    // University Save
    const newUniv = new University(univData);

    // Universoty Save
    newUniv.save((error) => {
        if (error) {
            console.log('Something went wrong with university save');
        }
        else {
            console.log('University data has ben saved');
        }
    });
}



 // COMMENT SET UP
 // Comment Schema Declaration
 const SchemaComment = mongoose.Schema;
 // Comment Schema
 const CommentSchema = new SchemaComment ({
     comment: String,
     postID: Number,
     date: {
         type: String,
         default: Date.now()
     },
     numLikes: Number,
 });
 // Comment Model
 const Comment = mongoose.model('Comment', CommentSchema);

 //PROF SET UP
 // Prof Schema Declaration
 const SchemaProf = mongoose.Schema;
 // Professor Schema
 const ProfSchema = new SchemaProf ({
     name: String,
     univID: Number,
     department: String,
     classes: String
 });
 // Professor Model
 const Prof = mongoose.model('Professor', ProfSchema);
 // UNIV SET UP
 // University Schema Declaration
 const SchemaUniv = mongoose.Schema;

 // University Schema
 const UnivSchema = new SchemaUniv ({
     university: String,
 });
 // University Model
 const University = mongoose.model('University', UnivSchema);


//TESTING FUNCTIONS
// makePost(postString);
// makeComment(commentString);
// addProf(profString);
// addUniv(univString); 




app.listen(PORT, console.log(`Server is starting at ${PORT}`));

//app.listen(3000, function(){
//    console.log("Server 3000");
//});

/*
app.get("/", function(req, res){
    res.sendFile(__dirname   "/AccountSetUp.jsx");
});

app.post("/", function(req, res){
    res.sendFile(__dirname   "/AccountSetUp.jsx");
});
*/
  

Вот мой api.js

 const router = express.Router();
const mongoose = require('mongoose');
const https = require("https");

const Post = require('../models/post');  // This is the model to use

// Routes
router.get('/', (req, res) => {
    Post.find( {  })
        .then((data) => {
            console.log('Data: ', data);
            const log = res.json(data);
            //console.log(log);
        })
        .catch((error) => {
            console.log('Error: ', daerrorta);  
        });
});

router.get("/", function(req, res){
    
    https.get(Post, function(response){
        console.log(response.statusCode);
    })

    res.send("hello")
})

router.post('/save', (req, res) => {
    console.log('Body: ', req.body);
    const data = req.body;

    const newPost = new Post(data);
    newPost.save((error) => {
        if (error) {
            res.json({ msg: 'Sorry, internal server errors'});
        }
        else {
            // Post
            res.json({
                msg: 'Your data has been saved!!'
            });
        }
    });
});

router.get('/name', (req, res) => {
    const data = {
        username: 'name',
        age: 20
    };
    res.json(data);
});

module.exports = router;

  

Это весь код, который у меня есть для компонента, который должен извлекать и отображать данные. Я не уверен, как получить доступ к данным, возвращенным из router.get этого компонента.

DisplayPost.tsx

 import { router } from "../routes/api";

export const DisplayPost = () => {
    return(
        <>
        <div>Welcome</div>
        </>
    )
}

  

Комментарии:

1. Что вы пробовали до сих пор? Похоже, вы возвращаете массив из вызова, поэтому вы можете перебирать этот массив и получать доступ к post свойству

2. Я пытался использовать любые предложения, которые я могу найти. Например, с помощью componentDidMount и JSON.Parse() . Я не пробовал перебирать массив. Вы предполагаете, что я могу использовать цикл для перебора data массива? Я еще не пробовал это, но не уверен, как структурировать это в коде или куда его поместить.

3. Возможно, было бы неплохо включить код, который у вас есть для компонента, который извлекает и отображает данные. Ваши данные — это просто массив (список), который вы можете использовать map для итерации по нему и отображения определенной его части: reactjs.org/docs/lists-and-keys.html Вы можете прочитать больше здесь

4. Я загрузил свой компонент, который будет выполнять рендеринг. Я бы сопоставил его в своем DisplayPost.tsx компоненте? Итак, по сути, я пытаюсь отобразить массив следующим образом: data.map(Post) ? Я попытался реализовать его по вашей ссылке, но возникли проблемы с объявлением или импортом этого массива в моем новом компоненте DisplayPost.tsx

5. Итак, где вы извлекаете данные? Это просто пустой компонент, так что вы делаете выборку в родительском компоненте?