1

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
  • 1
    I don't know React at all, but it seems to me that this is not really related to Mongo Stitch. Could you just do your data fetch from Stitch, reformat it in JS to the format that BootstrapTable is expecting, and feed that object/array into BootstrapTable? – halfer Feb 10 '20 at 13:44

0 Answers0