title: How to pass the id value of an url with axios and javascript for a single element
body: <p>I'm showing the data parameters (name, height, mass...) for a character using the swapi (<a href="https://swapi.co/" rel="nofollow noreferrer">https://swapi.co/</a>), AXIOS and VUE.</p>
  
  <p>I already have the url for a character (i.e <a href="http://localhost:8081/person/1" rel="nofollow noreferrer">http://localhost:8081/person/1</a>) and I want it to match with the swapi API (<a href="https://swapi.co/api/people/1/" rel="nofollow noreferrer">https://swapi.co/api/people/1/</a>), but I don't know where is my error</p>
  
  <p>I'm using Axios and Vue, I've made a service for the Axios get request and the method to get the information in my vue file.</p>
  
  <p>The code for my "people.service.js" service is this:</p>
  
  <pre><code>import axios from "axios";
  
  const PeopleService = {};
  
  // PeoplesService.getPeoples = async () =&gt; {}; - Para sacar el listado de planetas con un v-for
  
  PeopleService.getPeople = async id =&gt; {
    try {
      const result = await axios.get(`people/${id}`);
  
      // For getting the species
  
      const specieRoute = result.data.species[0].split("/");
      const idSpecie = specieRoute[specieRoute.length - 2];
      const especie = await axios.get(`species/${idSpecie}`);
  
      // For getting the planets
  
      const planetRoute = result.data.homeworld.split("/");
      const idPlanet = planetRoute[planetRoute.length - 2];
      const planeta = await axios.get(`planets/${idPlanet}`);
  
      // console logs to show results
  
      console.log(result.data);
      console.log(idSpecie);
      console.log(especie.data);
      console.log(planeta.data);
  
      // data information
  
      const people = {
        nombre: result.data.name,
        altura: result.data.height,
        peso: result.data.mass,
        genero: result.data.gender,
        piel: result.data.skin_color,
        especie: especie.data.name, // Lo saco del servicio de especies
        planeta: planeta.data.name // Lo saco del servicio de planetas
      };
  
      return people;
    } catch (error) {
      const errorStatus = error.response.status;
      let errorMessage = "";
  
      if (errorStatus === 404) {
        errorMessage = "No se encontró al personaje";
      } else {
        errorMessage = "Ocurrió un error";
      }
  
      throw new Error(errorMessage);
    }
  };
  
  export default PeopleService;
  </code></pre>
  
  <p>And my vue file is:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
  
      The id is {{ $route.params.id }}, and the name is {{ people.nombre }}
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import PeopleService from "@/services/people.service";
  
  export default {
    async create() {
      this.userId = this.$route.params.id;
      this.getUser();
    },
  
    data() {
      return {
        user: null,
        loading: false,
        error: null,
        userId: this.$route.params.id
      };
    },
    methods: {
      async getUser() {
        try {
          this.loading = true;
          this.people = null;
          this.error = null;
          this.people = await PeopleService.getPeople(this.userId);
        } catch (error) {
          this.error = error.message;
        } finally {
          this.userId = null;
          this.loading = false;
        }
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;&lt;/style&gt;
  </code></pre>
  
  <p>I expect the result to be the name of the character, but i get <strong><code>"[Vue warn]: Error in render: "TypeError: Cannot read property 'nombre' of undefined"</code></strong></p>