使用Node.JS调用外部API并显示JSON数据

时间:2017-01-10 12:15:22

标签: javascript json node.js express

我正在尝试使用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}

谢谢,祝你有愉快的一天!

1 个答案:

答案 0 :(得分:0)

你的物体形状不是很好。以下是应该看起来像null而不是像你的情况那样做另一个嵌套。使用这种形状的对象,您可以使用:[{tournament1}, {tournament2}轻松迭代集合(使用的是数组)。然后你可以使用像pug这样的模板引擎(被称为jade)并将它传递给锦标赛对象,然后在我的情况下在名为index的视图中循环。阅读有关如何在express中设置模板引擎的文档。

&#13;
&#13;
tournaments.forEach(function(tournament){ /*do something with this tournament */ }
&#13;
&#13;
&#13;

`