如何使用 Javascript 簡單地遍歷數組？

Question

我有一個由第三方 API 作為 JSON 返回的數據集。

現在我想遍歷數據並在我的前端填充一個排行榜（使用數組中的 11 個鍵：值）。

我已經將 object 轉換為數組（var standings ）並定義了一個空變量“rank”。 但現在我真的被困在如何繼續下去，其他教程只會增加我的困惑。

我是否需要創建 11 個空的 arrays 來獲取所需的數據，然后使用“新的”arrays 填充 html？ 可能這個任務可以通過“25-line-all-in-super-loop-solution”來處理。

這是我的 Javascript（掌聲：）：

          $.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);
                }

console.log 返回undefined （我試圖打印數組中的所有 20 個團隊名稱）。

這是 JSON 數據（它返回 1 個結果 = 1 個聯賽表，包括數組中的所有球隊以及其他數據）

{
    "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"
                },
                {...}
            ]
        ]
    }
}

以及要填充的 HTML 部分（但這將是第 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>

            [...]

Answer 1

從表面上看，這有點奇怪的響應格式。 問題是， standings不是結果數組，它是一個數組，只有一個數組作為它的唯一元素，而那個數組就是包含結果的數組。

如果它始終是一個包含單個條目的數組，那么而不是：

var standings = response.api.standings;

你需要

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

但是您需要查看您正在使用的 JSON 提要的文檔，以了解為什么它有這個額外的層，您可能需要一個嵌套循環，例如：

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

---

更多關於在我的回答中循環通過 arrays 的各種方法。

Answer 2

問題在於 var 排名 = response.api.standings;

實際上排名是數組數組。

所以像這樣訪問它

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

Answer 3

與實際上似乎是嵌套數組的響應格式相關的附加小答案。 我使用response.data.api.standings[0][0]處理輸入數組