javascript - How can I get my mongoose collection data displayed on the client side?

Question

I am trying to fetch the data from my mongoose collection, and dispaly that data on client side. But I am getting 'Object' on the cilent side instead of data, but the data is saved in the database.

Can anyone help me, Thanks

This is my code

router.js

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/Library', { useNewUrlParser: true });


const api_list = new mongoose.Schema({
    data:Array
});

const api = mongoose.model('api_listLs', api_list);

router.post('/api/list/Post', (request, response) => {
        const data = request.body
        const apiList = new api({data:data});
        apiList.save().then(() => {
            console.log(data)
            response.json(data);
        }).catch(() => {
            response.status(400).send("Item was not send to the database")
        });
});



router.get('/api/list/Get', (request, response) => {
    api.find({},(err,data)=> {
        if(err){
            response.end();
            return;
        }
        response.json(data);
    });
});

page1.js

I used a fetch 'POST' method to pass data into database. And save it in a collection

function TableRow() {
    let items = 'hey'
    let domore = 'hi'
    let cells = document.querySelectorAll('#recieve-info td');
    cells.forEach(cell => cell.onclick = async function () {
        let prevcell = cell.previousElementSibling;
        if (prevcell) {
            let data = {items, domore}
            let options = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            };
            
            const response = await fetch('/api/list', options);
            const json = await response.json();
            console.log(json);
        }
    });
}

page2.js

Here I used fetch 'GET' method to to retreive data from database and show it on client side

async function ParaG() {
  const response = await fetch('/api/list');
  const data = await response.json();
  console.log(data);
  alert(data);

  for (item of data) {
    const para = document.querySelector('.Second-Para');
    para.innerHTML += `${item.data}, ${item.data}`
  }
  
}

'.Second-Para' is a p element in a container 'div'

Here is the output. I am getting 'Object' instead of data

This app pass data from one page to another by onclick

question from:https://stackoverflow.com/questions/65837732/how-can-i-get-my-mongoose-collection-data-displayed-on-the-client-side

Answer 1

result is in data key and data is array of objects so use {data} to access the data like this:

async function ParaG() {
  const response = await fetch('/api/list');
  const {data} = await response.json();
  console.log(data);
  alert(data);

  for (item of data) {
    let info = item.data[0];//access to data 
    const para = document.querySelector('.Second-Para');
    para.innerHTML += `${info.items}, ${info.domore}`
  }
  
}