Probleme mit Vue JS Calling API

Question

Ich lerne gerade über Vue.js und ich habe ein Problem mit dem Aufruf einer API. Ich habe Zugriff auf diese öffentliche API von https://swapi.co/api/people/ und ich habe Probleme, wenn ich auf die Filme zugreifen. Ich habe die Filmdaten, aber die Daten sind im letzten Array gestapelt, und ich weiß nicht, was ich tun soll. Hoffe, euch kann mir helfen: D

<script> 
import axios from 'axios'; 

export default { 
    name: 'home', 
    data:() => ({ 
     profiles: [], 
     last_name_v: '', 
     movies_urls: [], 
     movies: [], 
     movie_s: [], 
     relateds: [], 
     errors: [], 
     datas: [] 
    }), 

    created() { 
     axios.get('https://swapi.co/api/people/') 
      .then(response => { 
       this.profiles = response.data.results.slice(0, 2); 
       for (var i = 0; i < this.profiles.length; i++) { 
        var profile_val = this.profiles[i]; 
        var full_name_o = profile_val.name; 
        var full_name_s = full_name_o.split(' '); 
        var last_name = full_name_s[full_name_s.length - 1]; 
        profile_val['last_name'] = last_name; 

        var movie_urls = profile_val.films.slice(0, 4); 
        console.log(profile_val.films.slice(0, 4)); 
        profile_val['movie_details'] = []; 
        for (var j = 0; j < movie_urls.length; j++) { 
         axios.get(movie_urls[j]) 
          .then(response => { 
           profile_val.movie_details.push(response.data); 
          }) 
          .catch(e => { 
           this.errors.push(e); 
          }); 
        } 
        this.datas.push(profile_val); 
       } 
      }) 
      .catch(e => { 
       this.errors.push(e); 
      }); 
    } 
} 

Answer 1

Was denken Sie, der Wert von profile_val einmal alle für Schleife Entschlossenheit in Ihrem inneren der Versprechen sein?

for (var j = 0; j < movie_urls.length; j++) { 
    axios.get(movie_urls[j]) 
     .then(response => { 
      profile_val.movie_details.push(response.data); 
     }) 
     .catch(e => { 
      this.errors.push(e); 
     }); 
} 

Eine der einfachsten Dinge, die Sie tun können, ist dies in eine Funktion bewegen und profile_val in einem Verschluss erfassen.

function fetchMovieDetails (profile_val, movie_url) { 
    return axios.get(movie_url) 
     .then(res => profile_val.movie_details.push(res.data)); 
}