調用外部API並使用Node.JS顯示JSON數據

Question

我正在嘗試使用Challonge API制作一個簡單的應用程序

我想要實現的是在我的個人頁面上顯示我在Challonge創建的所有錦標賽。

我已經使用了請求，並且能夠以JSON格式從我的帳戶中獲取比賽數據，但是我不知道如何在index.html中顯示它。

var express = require('express');
var request = require('request');
var path    = require("path");
var app = express();

app.get('/', function(req, res, next) {
  request({
    uri: 'https://api.challonge.com/v1/tournaments.json',
    qs: {
      api_key: '<key_here>'
    }
  }).pipe(res);
});

app.listen(3000, function(){
    console.log('Server listening on port 3000');
});

這是檢索到的JSON數據：

[
    {
        "tournament": {
            "id": 3117104,
            "name": "Test",
            "url": "39ikguh0",
            "description": "Testing",
            "tournament_type": "single elimination",
            "started_at": null,
            "completed_at": null,
            "require_score_agreement": false,
            "notify_users_when_matches_open": true,
            "created_at": "2017-01-10T01:26:36.602+03:00",
            "updated_at": "2017-01-10T01:26:36.602+03:00",
            "state": "pending",
            "open_signup": false,
            "notify_users_when_the_tournament_ends": true,
            "progress_meter": 0,
            "quick_advance": false,
            "hold_third_place_match": false,
            "pts_for_game_win": "0.0",
            "pts_for_game_tie": "0.0",
            "pts_for_match_win": "1.0",
            "pts_for_match_tie": "0.5",
            "pts_for_bye": "1.0",
            "swiss_rounds": 0,
            "private": false,
            "ranked_by": "match wins",
            "show_rounds": true,
            "hide_forum": false,
            "sequential_pairings": false,
            "accept_attachments": false,
            "rr_pts_for_game_win": "0.0",
            "rr_pts_for_game_tie": "0.0",
            "rr_pts_for_match_win": "1.0",
            "rr_pts_for_match_tie": "0.5",
            "created_by_api": false,
            "credit_capped": false,
            "category": null,
            "hide_seeds": false,
            "prediction_method": 0,
            "predictions_opened_at": null,
            "anonymous_voting": false,
            "max_predictions_per_user": 1,
            "signup_cap": null,
            "game_id": 194,
            "participants_count": 0,
            "group_stages_enabled": false,
            "allow_participant_match_reporting": true,
            "teams": false,
            "check_in_duration": 360,
            "start_at": "2017-01-12T01:26:00.000+03:00",
            "started_checking_in_at": null,
            "tie_breaks": [
                "match wins vs tied",
                "game wins",
                "points scored"
            ],
            "locked_at": null,
            "event_id": null,
            "public_predictions_before_start_time": false,
            "ranked": false,
            "grand_finals_modifier": null,
            "predict_the_losers_bracket": false,
            "description_source": "Testing",
            "subdomain": null,
            "full_challonge_url": "http://challonge.com/39ikguh0",
            "live_image_url": "http://challonge.com/39ikguh0.svg",
            "sign_up_url": null,
            "review_before_finalizing": true,
            "accepting_predictions": false,
            "participants_locked": false,
            "game_name": "Counter-Strike: Global Offensive",
            "participants_swappable": true,
            "team_convertable": false,
            "group_stages_were_started": false
        }
    },
    {
        "tournament": {
            "id": 3117146,
            "name": "name-alexnodeapitest",
            "url": "alexnodeapitest",
            "description": "",
            "tournament_type": "single elimination",
            "started_at": null,
            "completed_at": null,
            "require_score_agreement": false,
            "notify_users_when_matches_open": true,
            "created_at": "2017-01-10T01:49:51.205+03:00",
            "updated_at": "2017-01-10T01:49:51.205+03:00",
            "state": "pending",
            "open_signup": false,
            "notify_users_when_the_tournament_ends": true,
            "progress_meter": 0,
            "quick_advance": false,
            "hold_third_place_match": false,
            "pts_for_game_win": "0.0",
            "pts_for_game_tie": "0.0",
            "pts_for_match_win": "1.0",
            "pts_for_match_tie": "0.5",
            "pts_for_bye": "1.0",
            "swiss_rounds": 0,
            "private": false,
            "ranked_by": null,
            "show_rounds": false,
            "hide_forum": false,
            "sequential_pairings": false,
            "accept_attachments": false,
            "rr_pts_for_game_win": "0.0",
            "rr_pts_for_game_tie": "0.0",
            "rr_pts_for_match_win": "1.0",
            "rr_pts_for_match_tie": "0.5",
            "created_by_api": true,
            "credit_capped": false,
            "category": null,
            "hide_seeds": false,
            "prediction_method": 0,
            "predictions_opened_at": null,
            "anonymous_voting": false,
            "max_predictions_per_user": 1,
            "signup_cap": 8,
            "game_id": null,
            "participants_count": 0,
            "group_stages_enabled": false,
            "allow_participant_match_reporting": true,
            "teams": null,
            "check_in_duration": null,
            "start_at": null,
            "started_checking_in_at": null,
            "tie_breaks": null,
            "locked_at": null,
            "event_id": null,
            "public_predictions_before_start_time": null,
            "ranked": false,
            "grand_finals_modifier": null,
            "predict_the_losers_bracket": null,
            "description_source": "",
            "subdomain": null,
            "full_challonge_url": "http://challonge.com/alexnodeapitest",
            "live_image_url": "http://challonge.com/alexnodeapitest.svg",
            "sign_up_url": null,
            "review_before_finalizing": true,
            "accepting_predictions": false,
            "participants_locked": false,
            "game_name": null,
            "participants_swappable": true,
            "team_convertable": false,
            "group_stages_were_started": false
        }
    }
]

如何在Node.JS index.html頁面中顯示在Challonge創建的所有錦標賽？

我的index.pug模板：

doctype html
html(lang='en')
  head
    title Tournaments
  body
    h1 #{tournaments}

感謝，並有一個愉快的一天！

Answer 1

您的對象形狀不好。 這是應該看起來像[{tournament1}, {tournament2}的樣子，而不是像您的情況那樣進行另一個嵌套。 有了這種形狀的對象，您可以使用以下方法輕松地在集合（使用數組進行迭代）上進行迭代： tournaments.forEach(function(tournament){ /*do something with this tournament */ } 。然后可以使用像pug這樣的模板引擎（被稱為jade）並將其傳遞給錦標賽對象，然后在我的情況下循環進入名為index的視圖中，閱讀有關如何在express中設置模板引擎的文檔。

 app.get('/', function(req, res, next) { var tournaments = request({ uri: 'https://api.challonge.com/v1/tournaments.json', qs: { api_key: '<key_here>' } }) res.render('index', {tournaments}); next() }); 

`