Unable to perform the GET request method due to data indicating [object object]

Question

Unable to perform the GET request method due to data indicating [object object]

Currently, I am attempting to use a get request method within both Vue and Express in order to retrieve data based on my v-model.

Displayed below is the code where I am trying to send the data to Express.

getResult() {
  axios
    .get(
      `${process.env.VUE_APP_API}/hospita/result/` +
        {
          hosp_name: "SAMPLE"
        }
    )
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
}

Furthermore, here is the get request method responsible for receiving data from Vue.js.

router.get('/result/', (req, res) => {
    const sql = "SELECT * FROM ND_HOSP WHERE hosp_ptype = 'h' AND hosp_name LIKE ?";
    console.log(req.body)
    myDB.query(sql, ['%' + req.body.hosp_name + '%'], (err, result) => {
        if (err) {
            console.log(err)
        } else {
            try {
                res.send(result);
                /*  console.log(result) */
            } catch (err) {
                res.send(err)
            }
        }
    })
})

Despite these efforts, an error message appears stating http://localhost:9002/hospita/result/[object%20Object]

javascript express vue.js vuejs2

Answer 1

Answer №1

For your getResult() function, consider changing the method to post and replacing + with , when passing data in the body. Here is an example of how you can modify your code:

getResult() {
  axios
    .post( // <= change method to post
      `${process.env.VUE_APP_API}/hospita/result/`, // change `+` with `,`
        {
          hosp_name: "SAMPLE"
        }
    )
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
}

Additionally, remember to update your router's method from get to post. Take a look at this code snippet for reference:

// change method `get` to `post`
router.post('/result/', (req, res) => {
  const sql = "SELECT *  FROM \
  ND_HOSP WHERE hosp_ptype = 'h' AND hosp_name LIKE ?";
  console.log(req.body)
  myDB.query(sql, ['%' + req.body.hosp_name + '%'], (err, result) => {
      if (err) {
          res.send(err)
      } else {
        res.send(result);
      }
  })
})

Don't forget, since we are using req.body, make sure to include body parser in your server.js or app.js. The implementation should resemble the following code:

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

I trust this information will assist you in resolving any issues.

Answer 2

For your getResult() function, consider changing the method to post and replacing + with , when passing data in the body. Here is an example of how you can modify your code:

getResult() {
  axios
    .post( // <= change method to post
      `${process.env.VUE_APP_API}/hospita/result/`, // change `+` with `,`
        {
          hosp_name: "SAMPLE"
        }
    )
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
}

Additionally, remember to update your router's method from get to post. Take a look at this code snippet for reference:

// change method `get` to `post`
router.post('/result/', (req, res) => {
  const sql = "SELECT *  FROM \
  ND_HOSP WHERE hosp_ptype = 'h' AND hosp_name LIKE ?";
  console.log(req.body)
  myDB.query(sql, ['%' + req.body.hosp_name + '%'], (err, result) => {
      if (err) {
          res.send(err)
      } else {
        res.send(result);
      }
  })
})

Don't forget, since we are using req.body, make sure to include body parser in your server.js or app.js. The implementation should resemble the following code:

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

I trust this information will assist you in resolving any issues.

Answer 3

Answer №2

The issue lies in this line of code: res.send(result);

Result does not contain JSON data, instead it may contain any other object or an empty object like {}.

To troubleshoot, start by checking the content of result using console.log().

In cases like these, two functions can be very helpful:

JSON.stringify(object);
JSON.parse(strobj);

Answer 4

The issue lies in this line of code: res.send(result);

Result does not contain JSON data, instead it may contain any other object or an empty object like {}.

To troubleshoot, start by checking the content of result using console.log().

In cases like these, two functions can be very helpful:

JSON.stringify(object);
JSON.parse(strobj);

Unable to perform the GET request method due to data indicating [object object]

Answer №1

Answer №2

Similar questions

Creating a mind map: A step-by-step guide

Refresh the Dom following an Ajax request (issue with .on input not functioning)

What is the process by which a web browser executes a ".jsx" file while in development?

Unspecified binding in knockout.js

Submit JSON data that is not empty in the form of a custom format within the query string

Provide net.socket as a parameter

Exploring SubjectBehavior within my UserService and Profile Component

Removing elements in AngularJS using ngRepeat

Expressing the assignment of arrays inside the req.body object to separate variables

Angular 6 - Consistently returning a value of -1

Angular is unable to POST to Rails server with the content-type set as application/json

struggling to send JSON data to PHP using AJAX

Utilizing Electron's <webview> feature to display push notification count in the title

Concealing table columns using JavaScript - adapt layout on the fly

personalize auto-suggestions in AngularJS

Leverage the power of Azure Redis Cache to efficiently store Node JS express

An unexpected error has occurred in the browser console: The character '@' is not valid

The value of Vue's v-model data is currently undefined, likely due to an

Outputting HTML using JavaScript following an AJAX request

Guide on how to incorporate an external javascript file into an HTML button