Populate DOM using Vue.JS/Axios and data from a third party API (Django based!)

I would like to use Vue.js to populate the DOM with fetched data from a third party API (that being said I don’t have control over the API). The Vue function calls and returns the data needed and it also creates the correct amount of html divs. But the issue is that there is no data forwarded to those html/p containers.

Note: The API data (JSON) is a bit of confusing since it is some kind of array-in-array structure (I already talked with the provider and they have some good reason to structure this endpoint as it is). However it returns data just fine.

Similar issue which isn’t solved yet:

Vuejs Axios data not showing

Now I really don’t know on how to proceed.

This is my Vue.js function:

          var app = new Vue({
            el: '#Rank',
            data: {
              info: []
            },
            created() {
              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]);
                });
            }
          });

This is the HTML Part:

          <div class="table" id="Rank">
            <div><p>Rank</p></div>
            <div v-for="rank in info" class="rank"><p>{{ standings.rank }}</p></div>
          </div>

This is how the JSON is structured:

{
    "api": {
        "results": 1,
        "standings": [
            [{
                    "rank": 1,
                    "team_id": 85,
                    "teamName": "Paris Saint Germain",
                    "logo": "https://media.api-football.com/teams/85.png",
                    "group": "Ligue 1",
                    "forme": "DLWLL",
                    "description": "Promotion - Champions League (Group Stage)",
                    "all": {
                        "matchsPlayed": 35,
                        "win": 27,
                        "draw": 4,
                        "lose": 4,
                        "goalsFor": 98,
                        "goalsAgainst": 31
                    },
                    "home": {
                        "matchsPlayed": 18,
                        "win": 16,
                        "draw": 2,
                        "lose": 0,
                        "goalsFor": 59,
                        "goalsAgainst": 10
                    },
                    "away": {
                        "matchsPlayed": 17,
                        "win": 11,
                        "draw": 2,
                        "lose": 4,
                        "goalsFor": 39,
                        "goalsAgainst": 21
                    },
                    "goalsDiff": 67,
                    "points": 85,
                    "lastUpdate": "2019-05-04"
                },
                  [...]
               }
            ]
        ]
    }
}

And the v-for output, which creates the correct amount of html divs, but without any data..:

This is the info from Vue dev-tools:

Answer

You have used the wrong key rank in info inside the v-for, rename it to standings if you are going to use standings.rank

 <div class="table" id="Rank">
            <div><p>Rank</p></div>
            <div v-for="standings in info" class="rank"><p>{{ standings.rank }}</p></div>
          </div>

Update

created() {
              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('updated info', response.data.api.standings[0]); // can you share the value here ?
                });
            }

Edit: Code is working fine below, your problem should be elsewhere.

https://jsfiddle.net/59Lnbk17/1/

Advertisement

Answer