i want simple array not [__ob__: Observer] - laravel

Question

i call for the api to fetch data, i test it with postman and laravel send it as an array correctly, but vue turn my array into [ob: Observer] and i cant extract my array from it thanks to #Stockafisso it has been solved but
Edit: now my problem is, programming_languages array is only accesible inside getLanguages() method not anywhere else
data(){
return{
answer: '',
maxWrong: '',
programming_languages : []
}
},
methods:{
getLanguages(){
axios.get('/api/toController').then((response)=> {
this.programming_languages = JSON.parse(JSON.stringify(response.data)); //works fine
this.answer = this.programming_languages[Math.floor(Math.random() * this.programming_languages.length)].name; //works fine
this.maxWrong = this.answer.length;// works fine here, i dont want to initiaize answer variable in this method
});
},
randWord(){
this.answer = this.programming_languages[Math.floor(Math.random() * this.programming_languages.length)].name;// it is not working here
//Error in created hook: "TypeError: Cannot read property 'name' of undefined"
this.maxWrong = this.answer.length;// doesn't work here
}
},
created(){
this.getLanguages();
this.randWord();
}
what can i do?
thank you

Answer 1

most probable the error(s) is here:
this.programming_languages.push(JSON.parse(JSON.stringify(response.data)));
you are inserting the Laravel returned array inside the declared programming_languages, while you should override or concat it.
To explain better, a little example:
consider this:
let arr1 = [];
let arr2 = [1,2,3];
if you do arr1.push(arr2) your arr1 will be [[1,2,3]] while you want it to be [1,2,3].
Going back to your problem, to fix it you have two ways:
a)
.then((response)=> {
this.programming_languages = JSON.parse(JSON.stringify(response.data));
b)
.then((response)=> {
let swapArray = [...this.programming_languages];
this.programming_languages = swapArray.concat(JSON.parse(JSON.stringify(response.data)));
If this does not fix the error,
it could be the problem is in the array returned from Laravel. If it has not numeric or not sorted keys, JS will "fill" the missing spaces with Ob. Observer to try to keep the keys.

Answer 2

thank you all, finally i managed to solve it
first i extract array from vue's [ob: Observer]
this.programming_languages = JSON.parse(JSON.stringify(response.data));
special thanks to #stockafisso
and second was that i couldn't get this programming_languages array out of axios method, that happens due to nature of asynchronous call, see this informative link
How do I return the response from an asynchronous call?
i managed to solve it this way, async and await
methods: {
async getPosts(){
await axios.get('/api/hangman').then(response => {
this.programming_languages = JSON.parse(JSON.stringify(response.data));
}).catch(error => console.log(error));
},
randWord(){
this.answer = this.programming_languages[Math.floor(Math.random() * this.programming_languages.length)].name;
this.maxWrong = this.answer.length;
},
},
created(){
this.getPosts().then(() => this.randWord());
}