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

Question

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:

This looks suspiciously similar to a question you've asked before. https://stackoverflow.com/questions/58249476/why-does-vue-js-axios-dont-render-the-data-i-defined You say there's no data in the divs but in the picture you've posted you haven't expanded any of the divs. — skirtle, Oct 12 '19 at 18:16
@skirtle Thanks for your post. I will replace the image, but there are only empty
elements. I had a similar question in the past, yes. If the solution is the same, I can delete this one again. — JSRB, Oct 12 '19 at 18:18

Dhananjai Pai · Accepted Answer · 2019-10-12T18:40:15.640

1

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/

edited Oct 12 '19 at 18:40

answered Oct 12 '19 at 18:17

Dhananjai Pai

5,914
1
10
25

Thank you. I replaced it with your proposal, but still no data. I guess this is due to the "double-array" structure? – JSRB Oct 12 '19 at 18:22
Phanti, can you share the actual structure of the api json ? – Dhananjai Pai Oct 12 '19 at 18:23
with more examples – Dhananjai Pai Oct 12 '19 at 18:23
This is the json url: https://www.api-football.com/demo/api/v2/leagueTable/2 you can lint it using https://jsonlint.com/ (you probably know that, lol) , let me know if I should post the whole callback in my initial post. Thankss – JSRB Oct 12 '19 at 18:25
can you check the update and share the value in `response.data.api.standings[0]` ? If you are setting `this.info` as that value, then the nested structure should not be a problem, because info would be a simple array – Dhananjai Pai Oct 12 '19 at 18:28
@Phanti check the solution fiddle, it is working fine there, check if you have some other error with logic elsewhere – Dhananjai Pai Oct 12 '19 at 18:40
I have used the `league_id` as 2 in the above fiddle based on your example link in comment – Dhananjai Pai Oct 12 '19 at 18:41
feel free to upvote/accept the answer if this solves your problem; do ask if you have other concerns – Dhananjai Pai Oct 12 '19 at 18:42
copy/pasted the fiddle and everything works but the data transfer... I don't get it. I don't have errors or such, how to debug this?.. – JSRB Oct 12 '19 at 18:43
what do you mean by data transfer? axios request ? – Dhananjai Pai Oct 12 '19 at 19:04
create a fiddle and share – Dhananjai Pai Oct 12 '19 at 19:04
Done, thanks for your assistance.. When i copy my code to jsfiddle it works just fine. I am going nuts. For whatever ever reason Vue can't access the data in my environment – JSRB Oct 12 '19 at 19:15

score 0 · Answer 2 · edited Jul 16 '22 at 05:14

This is what finally worked for me:

Change the Delimiters from curly brackets into anything else, so there is no corrosion with Django which uses curly brackets for its variables as well.

Working solution as per initial issue:

JS:

  var app = new Vue({
    delimiters : ['[[',']]'],
    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]);
        });
    }
  });

HTML:

          <div id="app">
          <div class="table" id="Rank">
          <div><p>Rank</p></div>
          <div v-for="standings in info" class="rank"><p>[[ standings.rank ]]</p></div>
          </div></div>

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

2 Answers2