I have a simple React app connected to MongoDB Stitch (Atlas) up and running, and am able to fetch some dummy data anonymously. I can display the array of data as text:
const {
Stitch,
RemoteMongoClient,
AnonymousCredential
} = require('mongodb-stitch-browser-sdk');
const client = Stitch.initializeDefaultAppClient('XXX-YYY');
const db = client.getServiceClient(RemoteMongoClient.factory, 'mongodb-atlas').db('vendor');
client.auth.loginWithCredential(new AnonymousCredential()).then(() =>
db.collection('vendor-item').find().asArray()
).then(docs => {
console.log("Found docs", docs);
const html = docs.map(docs => `
<div>${docs._id}</div>
<div>${docs.owner_id}</div>
<div>${docs.number}</div>`);
document.getElementById("comments").innerHTML = html;
}).catch(err => {
console.error(err)
});
And that displays as HTML as:
5e3dd30510807794cdef7968
5e3dac4310807794cde483f9
42
,
5e3dd30510807794cdef7978
5e3dd223340f9a51200f9192
42
,
5e3dd504ba978a97da4dc058
5e3dd503ba978a97da4dc020
42
However, I am trying to pull that data from the database and display it in a react-bootstrap-table-next
table, which I have working out of the box, but also with different dummy data:
// dummy data
const data = [
{ id: 1, name: "Company 1", url: "http://www.google.com", loc:"san francisco, ca" },
{ id: 2, name: "Company 2", url: "http://www.bing.com", loc:"oakland, ca" }
];
const columns = [{
dataField: 'name',
text: 'Company'
}, {
dataField: 'url',
text: 'URL'
}, {
dataField: 'loc',
text: 'Location'
}];
Whereas I specifically need to combine the two methods and need the MongoDB array in the format that BootstrapTable is expecting, specifically as data={data}
and columns={columns}
as so:
<BootstrapTable
keyField="id"
data={data}
columns={columns}
striped
hover
condensed
bootstrap4
/>
I have already scoured the web for tutorials using "mongodb-stitch" and "react" and tried everything I could think of, with no luck.