CODEWITHSUNDEEP
mongodbexpressvue.js
Gosmith
Gosmith

Reputation: 469

display single record by id with vue js and axios

I have a mongodb express vue js app that displays a list of items in cards which are links to a detail view of each record. If I hover over the card the correct id for the link displays but click any card and it goes to the first document from mongo and the record does not display. The view retrieves an item but always the first one.

How to display a record of the ID of item clicked?

Report.vue

the backend request which works in postman is

// Get Simgle Report
router.get('/:id', async (req, res) => {
  const reports = await loadReportsCollection()
  await reports.findOne({_id: new mongodb.ObjectID( req.params.id)})
  res.send(await reports.find({}).limit(1).toArray())
  res.status(200).send()
  }
)

ReportService.js looks like

    //Find Single Report
  static getReport(id) {
    return axios.get(`${url}${id}`)
  }

and the Report.vue file looks like

mounted () {
    this.getReport()
  },

  methods: {
    async getReport() {
        try {
          const response = await ReportService.getReport(this.$route.params.id)
          this.report = response.data
        } catch(err) {
          this.err = err.message
        }
      },
  }

many thanks for help!

Upvotes: 2

Views: 1954

Answers (2)

Leon
Leon

Reputation: 536

To not only get the first entry, but the one you are looking for you need to change your send() parameter.

Here is the working code:

// Get Simgle Report
router.get('/:id', async (req, res) => {
    const reports = await loadReportsCollection()
    const report = await reports.findOne({_id: new mongodb.ObjectID(req.params.id)})
    res.send(await report)
    res.status(200).send()
  }
)

And as Andrew1325 stated you need to change your axios.get() call also to pass the correct params to it.

Upvotes: 1

Andrew1325
Andrew1325

Reputation: 3579

It would seem you are trying to access a param in your api without passing one in your request. You ask for params here:

await reports.findOne({_id: new mongodb.ObjectID( req.params.id)})

but haven't passed any in your request. This should do it:

return axios.get('/:id', {
  params: {
    id: `${id}`
  }
})

Upvotes: 1

Related Questions