(Multiple) Axios Post requests/params question

Question

This is a multipart question (and coincidentally my first here on Stack!). To preface, I'm building a site with a Rails backend and a Vue.js frontend.

My problem is with an Axios POST request. I am attempting to send two POST requests with one click of the submit button. I have a "Trips" controller and a "User_Trips" controller - the later of which functions as a join to other tables in my database. In order for a newly created trip to show up, a new user_trip needs to be created too.

My trip posts just fine and shows up when I look for it in Postico, but my user_trip does not post successfully, and I think it's because I'm struggling to determine how to pass the recently created trip's id through as the param needed to create a user_trip. Here is a section of the code I'm working on from Vue.js:

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      trips: [],
      errors: [],
      name: "",
      country: "",
      state: "",
      city: "",
      postal_code: "",
      start_date: "",
      end_date: "",
      image: "", 
      trip: this.trip
    };
  },
  mounted: function() {
    // axios.get("http://localhost:3000/api/trips").then(
    //   function(response) {
    //     console.log(response);
    //     this.trips = response.data.trips;
    //   }.bind(this)
    // );
  },
  methods: {
    submit: function() {
      var params = {
        name: this.name,
        country: this.country,
        state: this.state,
        city: this.city,
        postal_code: this.postal_code,
        start_date: this.start_date,
        end_date: this.end_date,
        image: this.image
      };
      axios
        .post("http://localhost:3000/api/trips", params)
        .then(response => {
          axios.get("http://localhost:3000/api/trips").then(
            function(response) {
              console.log(response);
              this.trips = response.data.trips;
            }.bind(this)
          );
        })
        .catch(error => {
          this.errors = error.response.data.errors;
        });
      var paramsTwo = {
        trip_id: this.trip.id
      };
      axios
        .post("http://localhost:3000/api/usertrips", paramsTwo)
        .then(response => {
          this.$router.go("/home");
        })
        .catch(error => {
          this.errors = error.response.data.errors;
        });
    }
  }
};
</script>

Here is the error message I receive in the console log: Uncaught TypeError: Cannot read property 'id' of undefined and I'm thinking it's because I'm not selecting the right trip from the array...BUT when I look at the GET request in the log, the newly created trip doesn't show up - it's only visible my database. Any helpful suggestions are most appreciated!! - Thanks

Answer 1

The code is breaking at the paramsTwo line and that's why your second post won't work. Make sure that the object returned by your API has an id property. Some DBs return a _id property instead of id.

Answer 2

Figured it out! A big thanks to the helpful commenters and answerers.

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      trips: [],
      errors: [],
      name: "",
      country: "",
      state: "",
      city: "",
      postal_code: "",
      start_date: "",
      end_date: "",
      image: "", 
    };
  },
  mounted: function() {
  },
  methods: {
    submit: function() {
      var params = {
        name: this.name,
        country: this.country,
        state: this.state,
        city: this.city,
        postal_code: this.postal_code,
        start_date: this.start_date,
        end_date: this.end_date,
        image: this.image
      };
      axios
        .post("http://localhost:3000/api/trips", params)
        .then(response => {
          console.log(response);
          this.trip = response.data;
          var paramsTwo = {
            trip_id: this.trip.id
          };
          axios
            .post("http://localhost:3000/api/usertrips", paramsTwo)
            .then(response => {
              this.$router.go("/home");
            })
            .catch(error => {
              this.errors = error.response.data.errors;
            });
        }
        );
    }
  }
};
</script>