qiita apiをつかって記事をとってくる！ #JavaScript

Qiita apiを使って
記事のタイトルとその記事へのリンクを20件取得し
画面に表示させるものをつくりました。

次の20件を表示リンクを押すと追加で20件表示されます。

jqueryやajaxやJSONやapiを使った経験があまりなく
つまづいたところがたくさんあったのでメモします

JSONのデータをどう表示させるか、apiってどう使うのか、appendってどういう風にしてhtmlを加えていくのか、最初はイメージがつかなくて時間がかかりました…

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Qiita api</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
    var no = 1
    // キャッシュを無効にする
    $.ajaxSetup({
        cache: false
    });
    // 記事をとってきて表示
    var getArticle = function(){
        $.get('http://qiita.com/api/v2/items?',
                { page:no, per_page:"20" }
            ).done(function(data) {
                $.each(data, function(i, v){
                    // aタグオブジェクトをつくってhrefにv.urlをセット
                    // v.titleをテキスト形式で表示
                    var a = $("<a>").attr("href", v.url).text(v.title);
                    // liタグオブジェクトをつくって先程作ったaをappend
                    // それを#js_append_areaに追加
                    $("#js_append_area").append($("<li>").append(a));
                })
            });
    }
    // 最初の20件を初期表示
    getArticle();
    // ボタンを押すごとに次の20件を表示
    $("#next").click(function () {
        ++no;
        getArticle();
    });
});
</script>
</head>
<body>
    <ul id="js_append_area">
    </ul>
    <a id="next" href="#">次の20件を表示</a>
</body>
</html>

つまづいたところを上から順番に

メソッド化

var メソッド名 = function(){メソッド化したい内容}

今回記事の表示は、初期表示時とボタン押下時の2回出てくるので
メソッド化しました。

.done()

ajaxで取得してきたデータを受け取ります。

jqueryのfor文

.each(data, function(i, v)で
dataをvごとに取り出せます。iはインデックス。

.attr()

.attr( name ) 指定した属性の値をとってきます。
.attr( name, value ) 指定した属性にvalueの値をセットします。
参考　http://js.studio-kingdom.com/jquery/attributes/attr

.append

指定した要素の一番後ろにHTMLやエレメントを挿入します。
すでにある要素に挿入の場合には、セレクタで指定。
新しく要素をつくってさらに挿入したい場合には$("<a>")みたいにオブジェクトをつくって
そこにappendします。

.text()と.html()

その要素内にtextとして扱いたいものを書く場合にはtext()、
htmlとして扱いたいものを書く場合にはhtml()。

以上です！