web-dev-qa-db-ja.com

GithubPagesからJSONデータを提供する

Githubにリポジトリがあり、リポジトリのルートディレクトリに多数のcsv、json、ymlデータファイルが含まれています。

Github Pagesを使用してこれらのファイルを提供するにはどうすればよいですか?

たとえば、次のようになります。http://username.github.io/reponame/に移動してから

  • /postsposts.jsonファイルのコンテンツを提供します
  • /userssers.jsonファイルのコンテンツを提供します
  • /commentscomments.jsonファイルのコンテンツを提供します
  • /posts.csvposts.csvファイルのコンテンツを提供します
12
Ishan

リポジトリに.jsonファイルを追加するだけで、通常のJSONAPIのようにそれらにアクセスできます。

次のリポジトリにusername.github.io/reponame次のファイルを追加します

posts.json

[
  {"id": 1, "title": "Title 1"},
  {"id": 2, "title": "Title 2"}
]

sers.json

[
  {"name": "abc", "email": "[email protected]"},
  {"name": "xyz", "email": "[email protected]"}
]

comments.json

[
  {"post_id": "1", "text": "Comment 1"},
  {"post_id": "2", "text": "Comment 2"}
]

posts.csv

id,title
1,Title 1
2,Title 2

そしてそれらにアクセスする

  • http://username.github.io/reponame/posts.json
  • http://username.github.io/reponame/users.json
  • http://username.github.io/reponame/comments.json
  • http://username.github.io/reponame/posts.csv
13
Deepak Mahakale

index.jsonの代わりにindex.htmlを作成して、application/json; charset=utf-8ヘッダーを取得できます。

つまり、次のものを作成します。--posts/index.jsonで提供されるhttp://username.github.io/reponame/posts/、-users/index.jsonで提供されるhttp://username.github.io/reponame/users/など。

ディレクトリとして、末尾にスラッシュ(http://username.github.io/reponame/posts)を付けずにアクセスすると、末尾にスラッシュがある同じパスへの301リダイレクトが返されることに注意してください。つまり、機能しますが、クライアントはリダイレクトに従う必要があり(curlはデフォルトでは従わず、curl --locationは従います)、余分なラウンドトリップのために少し遅くなります...

実用的な例については、 https://github.com/cben/sandbox/tree/master/json ディレクトリを参照してください( https://cben.github.io/sandbox/jsonで提供) / )。

P.S. 1つのディレクトリに複数のindex.*ファイルとREADME*ファイルを含めることは避けてください。 index.jsonの横にREADME.mdを追加すると、READMEが勝ち、json/で提供されたため、名前を別の名前に変更する必要がありました。

このタイプのURL(例:/ posts)は、htmlファイルでのみ機能します。 jsonファイルにposts.htmlという名前を付けて、その前書きを次のように設定できます。

---
layout: null
permalink: /posts/
---
{ "variable": "value" }

次に、/ postsまたは/ posts /でファイルにアクセスします。

唯一の欠点は、返されるファイルが/ posts/index.htmlであり、予期されるContent-Type: text/htmlではなくapplication/jsonmimeタイプで提供されることです。

1
David Jacquel

Githubからjsonを使用する方法に関するコードブロックを追加しています:

function logResults(json) {
    console.log(json)
}

$.ajax({
    url: "https://raw.githubusercontent.com/cben/sandbox/master/json/index.json",
    dataType: "json"
}).done(function(result){
    console.log(result);
});

Jfiddleの例を確認してください: https://jsfiddle.net/v_alishauskaite/dxm8cvkL/1/