When I utilize Vue.js + Axios to query data from a third party API, the response is returned with a slightly confusing nested array structure. However, upon rendering the data at the frontend, I encounter an issue where no information is displayed.
It's worth noting:
After running the code, Vue adds exactly 20 html divs on the frontend, matching the number of elements, but fails to display the corresponding data (refer to images below).
What could potentially be causing this problem?
Javascript snippet:
var app = new Vue({
el: '#app_name',
data: {
info: []
},
mounted() {
axios
.get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
.then(response => {
this.info = response.data.api.standings[0];
console.log(response.data.api.standings[0]);
});
}
HTML segment:
<div class="table" id="app_name">
<div><p>Team</p></div>
<div v-for="Rank in info">
<p>{{ Rank }}</p>
</div>
JSON return showing the nested array:
{
"api": {
"results": 1,
"standings": [
[
{
"rank": 1,
"team_id": 85,
"teamName": "Paris Saint Germain",
...
},
{...}
]
]
}
}
Before executing Javascript:
https://i.sstatic.net/o9hf2.jpg
After running Javascript:
https://i.sstatic.net/S5qH4.jpg
UPDATE
Even after trying out the modification mentioned here, I still face difficulties in rendering any data.
var app = new Vue({
el: '#app_name',
data: {
info: []
},
mounted() {
axios.interceptors.request.use(config => {
config.paramsSerializer = params => {
// Qs is already included in the Axios package
return Qs.stringify(params, {
arrayFormat: "brackets",
encode: false
});
};
return config;
});
axios
.get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
.then(response => {
this.info = response.data.api.standings;
console.log(response.data.api.standings);
});
}