How to get a single data from NodeJS and display in VueJS?

Question

I created a database that has the details of users and I want it to be displayed my VueJS by searching its first name.

Below is my code to request details of the users in a JSON. It's working so my next step would be display the data in my VueJS.

http://localhost:9000/api/user/:id

I got something like this on my VueJS

export default {
  data() {
    return {
      search: "",
      results: {}
    };
  },

  mounted() {
    this.getUsers();
  },
  methods: {
    getUser() {
      axios
        .get("http://localhost:9000/api/user/")
        .then(response => (this.results = response.data))
        .catch(error => alert(error));
    }
  },

  computed: {
    /* Search Bar */
    filteredPeople() {
      if (this.search) {
        return this.results.filter(result => {
          return result.First_Name.toLowerCase().startsWith(
            this.search.toLowerCase()
          );
        });
      } else {
        return this.results;
      }
    }
  },
};
</script>

and to display it, I created something like this

<div v-for="result in results" :key="result.id">
  <input type="text" v-model="search" placeholder="Search by name" />
  {{result.First_Name}}
  {{result.Last_Name}}
</div>

Here's my nodejs query to request a specific user

//gets a specific user based on their ID
router.get('/user/:id', function (req, res) {
    let sql = "SELECT * FROM MEMB WHERE id = ?";
    myDB.query(sql, req.params.id, function (err, rows) {
        if (err) {
            console.log("Your query has error."+ err);
        } else {
            console.log(rows);
            res.send(rows);
        }
    });
});

Core972 · Accepted Answer · 2019-07-10 07:16:54Z

1

Try to change getUser() like that:

getUser() {
  let self = this;
  axios
    .get("http://localhost:9000/api/user/", {
      params: {
        id: 12345
      }
    })
    .then(response => (self.results = response.data))
    .catch(error => alert(error));
}

edited Jul 10, 2019 at 7:16

answered Jul 10, 2019 at 6:47

Core972

4,1143 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Core972 Over a year ago

@Vin, what console.log(response.data) returns ?

Vin Over a year ago

None, idk why. Maybe I need to pass a data .get("localhost:9000/api/user" + id)? Something like that

Core972 Over a year ago

@Vin, try to add the id like I did just now.

Imtiyaz Shaikh · Accepted Answer · 2019-07-10 06:57:43Z

0

Just a work around to this:

Please check this out: https://bootstrap-vue.js.org/docs/components/table#complete-example

It has got ready functions for bootstrap-vue to search by Name. All you have to do is:

Put a boostrap-vue table
Return an array of users from API to axios response
Set items to array of users

answered Jul 10, 2019 at 6:57

Imtiyaz Shaikh

6455 silver badges9 bronze badges

2 Comments

Vin Over a year ago

Can this table handle big data?

Imtiyaz Shaikh Over a year ago

Yes. I tested it on 10000 records from mongo db.

Collectives™ on Stack Overflow

How to get a single data from NodeJS and display in VueJS?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related