Loopback throws errors Unprocessable Entity

Question

I am using vue js for front end development and i am using loopback api for backend . When I make the request form loopback api ,it works fine but when I tried to insert data from webpage I got following errors in console window.

HTMLPage2.html:101 POST http://localhost:3000/api/Cat/ 422 (Unprocessable Entity)

Here is my code .

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <script src="./server.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>





</head>
<body>

  <div id="catApp">

    <h1>Cats</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Breed</th>
          <td>&nbsp;</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="cat in cats">
          <td @click="editCat(cat)" class="catItem" title="Click to Edit">{{cat.name}}</td>
          <td>{{cat.age}}</td>
          <td>{{cat.gender}}</td>
          <td>{{cat.breed}}</td>
          <td @click="deleteCat(cat)" class="deleteCat" title="Click to Delete">Delete</td>
        </tr>
      </tbody>
    </table>

    <form @submit.prevent="storeCat">
      <p>
        <label for="name">Name</label>
        <input type="text" id="name" v-model="cat.name">
      </p>
      <p>
        <label for="age">Age</label>
        <input type="number" id="age" v-model="cat.age">
      </p>
      <p>
        <label for="breed">Breed</label>
        <input type="text" id="breed" v-model="cat.breed">
      </p>
      <p>
        <label for="gender">Gender</label>
        <input type="text" id="gender" v-model="cat.gender">
      </p>
      <input type="reset" value="Clear" @click="reset">
      <input type="submit" value="Save Cat ????">
    </form>
  </div>

  <script>
    const API = 'http://localhost:3000/api/Cat/';
    let catApp = new Vue({
      el: '#catApp',
      data: {
        cats: [],
        cat: {
          id: '',
          name: '',
          age: '',
          gender: '',
          breed: ''
        }
      },
      created: function () {
        this.getCats();
      },
      methods: {
        getCats: function () {
          fetch(API)
            .then(res => res.json())
            .then(res => this.cats = res);
        },
        storeCat: function () {
          let method;
          console.log('storeCat', this.cat);
          // Handle new vs old
          if (this.cat.id === '') {
            delete this.cat.id;
            method = 'POST';
          } else {
            method = 'PUT';
          }
          fetch(API, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: method,
            body: JSON.stringify(this.cat)
          })
            .then(res => res.json())
            .then(res => {
              this.getCats();
              this.reset();
            });
        },
        deleteCat: function (c) {
          fetch(API + c.id, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: 'DELETE'
          })
            .then(res => res.json())
            .then(res => {
              this.getCats();
            });

          // call reset cuz the cat could be 'active'
          this.reset();
        },
        editCat: function (c) {
          /*
          This line was bad as it made a reference, and as you typed, it updated
          the list. A user may think they don't need to click save.
          this.cat = c;
          */
          this.cat.id = c.id;
          this.cat.name = c.name;
          this.cat.age = c.age;
          this.cat.breed = c.breed;
          this.cat.gender = c.gender;
        },
        reset: function () {
          this.cat.id = '';
          this.cat.name = '';
          this.cat.age = '';
          this.cat.breed = '';
          this.cat.gender = '';
        }
      }
    });
  </script>
</body>
</html>

Here is the screen shot of the error .

Shubham Shubham · Accepted Answer · 2019-07-19T06:59:07

Please go through the following steps :

1)Just update your API endpoint as 'http://localhost:3000/api/Cats/'.

2)refresh your html file.

Loopback throws errors Unprocessable Entity

2 Answers