How can I simply loop through an array using Javascript?

Question

I have a dataset returned by a third party API as JSON.

Now I want to loop through the data and populate a league table at my frontend (using 11 key:values from the array).

I already transformed the object into an array (var standings) and defined an empty variable "rank". But now I am really stuck on how to proceed, other tutorials just increase my confusion.

Do I need to create eleven empty arrays to grab the required data into them and populate the html using the "new" arrays afterwards? Probably this task can be handled by a "25-line-all-in-super-loop-solution".

This is my Javascript (applause!):

          $.ajax({
            method: "GET",
            async: "True",
            dataType: "json",
            url: "https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id,
            success: function(response) {

              var standings = response.api.standings;
              for (let i = 0; i < standings.length; i++) {

                var rank = [];

                  console.log(standings[i].teamName);
                }

The console.log returns undefined (i tried to print all 20 teamnames within the array).

This is the JSON data (it returns 1 result = 1 league table including all teams in the array with additional data)

{
    "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 HTML part to populate (however this would be step 2)

<div class="fifthRow">
        <div class="column">
          <div class="table" id="rank">
            <div><p></p></div>
            [...]
            <div><p></p></div>
          </div>

          <div class="table" id="logo">
            <div><p>Rank</p></div>
            <div><p></p></div>
            [...]
            <div><p></p></div>
          </div>

            [...]

Using raw html, you will need to create a table using many createElement and appendChild calls. If you use a framework like `vue`, this would handled in a 1 line block of code. If your array is unexpected, log the response instead: `console.log(response.api)` to see what is there. — Steven Spungin, Oct 05 '19 at 11:26

score 2 · Accepted Answer · answered Oct 05 '19 at 11:26

On the face of it, that's an bit of an odd response format. The problem is that standings isn't the array of results, it's an array with a single array as its only element, and that array is the one with the results.

If it's always an array with a single entry, then instead of:

var standings = response.api.standings;

you need

var standings = response.api.standings[0];

But you'll want to review the documentation for the JSON feed you're consuming to understand why it has this extra layer, you may need a nested loop, e.g.:

for (const standing of response.api.standings) {
    for (const entry of standing) {
        console.log(entry.teamName);
    }
}

More about various ways to loop through arrays in my answer here.

score 1 · Answer 2 · answered Oct 05 '19 at 11:27

1

Problem is with var standings = response.api.standings;

actually standings is array of array.

so access it like this

var standings = response.api.standings[0];

answered Oct 05 '19 at 11:27

Abhishek Tiwari

135
7

score 0 · Answer 3 · answered Oct 05 '19 at 13:40

0

Small additional answer in relation to that response format which actually seems to be a nested array. I handled to enter the array using response.data.api.standings[0][0]

answered Oct 05 '19 at 13:40

JSRB

2,492
1
17
48

How can I simply loop through an array using Javascript?

3 Answers3