从Github Pages提供JSON数据

问题描述 投票:8回答:4

我在github上有一个存储库,它在存储库的根目录中包含许多csv,json,yml数据文件。

如何使用Github Pages来提供这些文件?

所以对于例如:当我去http://username.github.io/reponame/之后

  • /posts - 提供posts.json文件的内容
  • /users - 提供users.json文件的内容
  • /comments - 提供comments.json文件的内容
  • /posts.csv - 提供posts.csv文件的内容
json api github repository github-pages
4个回答
10
投票

您只需要在存储库中添加.json文件,就可以像普通的JSON API一样访问它们

在以下存储库中,username.github.io/reponame添加以下文件

posts.json

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

users.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

2
投票

您可以创建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/上提供)。

附:在一个目录中避免使用多个index.*README*文件;当我在index.json旁边添加一个README.md时,README赢了并在json/服务,所以我不得不将它重命名为其他东西。


1
投票

这种类型的URL(例如:/ posts)仅适用于html文件。你可以命名你的json文件posts.html并设置它的前面这样的事情:

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

然后,您将通过/ posts或/ posts /访问您的文件。

唯一的缺点是返回的文件是/posts/index.html,它与Content-Type: text/html mime类型一起提供,而不是预期的application/json


0
投票

我正在添加一个关于如何从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);
});

请查看jsfiddle的示例:qazxsw poi

© www.soinside.com 2019 - 2024. All rights reserved.