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. stackoverflow.com/questions/58249476/… 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
– skirtle, Commented Oct 12, 2019 at 18:16
@skirtle Thanks for your post. I will replace the image, but there are only empty <p> elements. I had a similar question in the past, yes. If the solution is the same, I can delete this one again. — JSRB
– JSRB, Commented Oct 12, 2019 at 18:18

Dhananjai Pai · Accepted Answer · 2019-10-12 18:40:15Z

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, 2019 at 18:40

answered Oct 12, 2019 at 18:17

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

JSRB Over a year ago

Thank you. I replaced it with your proposal, but still no data. I guess this is due to the "double-array" structure?

Dhananjai Pai Over a year ago

Phanti, can you share the actual structure of the api json ?

Dhananjai Pai Over a year ago

with more examples

JSRB Over a year ago

This is the json url: api-football.com/demo/api/v2/leagueTable/2 you can lint it using jsonlint.com (you probably know that, lol) , let me know if I should post the whole callback in my initial post. Thankss

Dhananjai Pai Over a year ago

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

|

tony19 · Accepted Answer · 2022-07-16 05:14:56Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related