bzz0217/syousetu_narou_api.html

## syousetu_narou_api.html
<!DOCTYPE html>
<html>
    <head>
        <title>小説家になろう APIリクエスト</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
          <ul id="app">
            <li v-for="r in rank">{{r.title}}</li>
          </ul>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script>
            var Syousetu = function(url){
              this.syousetu_total_rank = {};
              this.title_list = [];
              this.url = url;
            }

            Syousetu.prototype.request = function (){
              var script = document.createElement('script');
              script.src = this.url;
              document.body.appendChild(script);
            }

            Syousetu.prototype.callback = function (res){
                this.syousetu_total_rank = res;
                console.log(this.syousetu_total_rank);

                this.prepare();
                this.view();
            }

            Syousetu.prototype.prepare = function(){
                for(var i=1; i<this.syousetu_total_rank.length; i++){
                    console.log(this.syousetu_total_rank[i]['title']);
                    this.title_list[i-1] = { title : this.syousetu_total_rank[i]['title']};
                }
            }

            Syousetu.prototype.view = function(){
                var vm = new Vue({
                  el: "#app",
                  data: {
                      rank : this.title_list
                  }
                });
            }

            var url = "http://api.syosetu.com/novelapi/api/?lim=300&order=hyoka&out=jsonp&callback=s.callback";
            var s = new Syousetu(url);
            s.request();
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>小説家になろう APIリクエスト</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<div>
	<ul id="app">
	<li v-for="r in rank">{{r.title}}</li>
	</ul>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
	<script>
	var Syousetu = function(url){
	this.syousetu_total_rank = {};
	this.title_list = [];
	this.url = url;
	}

	Syousetu.prototype.request = function (){
	var script = document.createElement('script');
	script.src = this.url;
	document.body.appendChild(script);
	}

	Syousetu.prototype.callback = function (res){
	this.syousetu_total_rank = res;
	console.log(this.syousetu_total_rank);

	this.prepare();
	this.view();
	}

	Syousetu.prototype.prepare = function(){
	for(var i=1; i<this.syousetu_total_rank.length; i++){
	console.log(this.syousetu_total_rank[i]['title']);
	this.title_list[i-1] = { title : this.syousetu_total_rank[i]['title']};
	}
	}

	Syousetu.prototype.view = function(){
	var vm = new Vue({
	el: "#app",
	data: {
	rank : this.title_list
	}
	});
	}

	var url = "http://api.syosetu.com/novelapi/api/?lim=300&order=hyoka&out=jsonp&callback=s.callback";
	var s = new Syousetu(url);
	s.request();
	</script>
	</body>
	</html>