Vue.jsでAPIにアクセスするには？

JavaScriptとVue.jsが新しく、Vue.jsを使用してAPIにアクセスするのに問題があります。私がアクセスしようとしているAPIは、次のようになりますJSONを持っていますVue.jsでAPIにアクセスするには？

{ 
    "coord": { 
     "lon": -88.99, 
     "lat": 40.51 
    }, 
    "weather": [ 
     { 
      "id": 800, 
      "main": "Clear", 
      "description": "clear sky", 
      "icon": "01n" 
     } 
    ], 
    "base": "stations", 
    "main": { 
     "temp": 2.09, 
     "pressure": 1022.3, 
     "humidity": 69, 
     "temp_min": 2.09, 
     "temp_max": 2.09, 
     "sea_level": 1052.03, 
     "grnd_level": 1022.3 
    }, 
    "wind": { 
     "speed": 12.66, 
     "deg": 205.502 
    }, 
    "clouds": { 
     "all": 0 
    }, 
    "dt": 1482203059, 
    "sys": { 
     "message": 0.186, 
     "country": "US", 
     "sunrise": 1482239741, 
     "sunset": 1482273134 
    }, 
    "id": 4903780, 
    "name": "Normal", 
    "cod": 200 
}

それ自身の作品のAPIリンクが、私はプログラムを実行するとき、私は私がそれにアクセスしてるとは思いません。私がJSONを解析して解析せずに、apiから収集されたすべてのデータを表示するだけでも、私の変数はまだ空です。だから、私はapiにアクセスするために何か間違ったことをしているに違いない。また、APIにアクセスした後、この作品のように、それを解析します：例えば、タグにアクセスするには、 "TEMP" => "data.main.temp"

var weather = new Vue({ 
     el: '#weather', 

     data: { 
      getTemp: '' 
     }, 

     created: function() { 
      this.fetchData(); 
     },   

     methods: { 
      fetchData: function() { 
       this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'), 
        function (data) { 
         this.getTemp = data.main.temp; 
        } 
      } 
     } 

    }) 
    ;

HTMLコード：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script> 
</head> 

<body> 
<div id="weather"> 
    {{getTemp}} 
</div> <!--end of weather--> 
</body> 

<script src="app.js"></script> 

</html>

出典

2016-12-20 thefreebird777

私は、あなたが次の変更を加える必要があり、黒$http.get内部this変化の範囲をthisの範囲の問題を参照してください。

methods: { 
     fetchData: function() { 
      var vm = this 
      this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'), 
       function (data) { 
        vm.getTemp = data.main.temp; 
       } 
     } 
    }

私の似たような答えhereをチェックすることもできます。

出典

2016-12-20 03:35:02 Saurabh

おかげで行きたいが、それは後で私に問題を引き起こしているだろう。 – thefreebird777

@ thefreebird777 $ httpコールでログデータをコンソール化する場合、APIからデータを取得していますか？ – Saurabh

いいえ、私はありません。しかし、私はアドレスバーにAPIのURLを置く場合、それは良いリンクですので、動作します。 – thefreebird777

私はそれはまだ動作していない、あなたのコードでは、ここで約束、およびその他のいくつかの調整を

var weather = new Vue({ 
     el: '#weather', 

     data: { 
      getTemp: [] 
     }, 

     created: function() { 
      this.fetchData(); 
     },   

     methods: { 
      fetchData: function() { 
       this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID') 
          .then(response => { 
          this.getTemp = response.data 
          // or like this this.getTemp = response.json() 
          }) 
      } 
     } 

    }) 
    ;

出典

2016-12-20 08:21:42

'this.data.getTemp = response.data '？ – kiltek

@kiltekいいえ、それは –

ではありません。あなたのバージョンで作業しました。 – kiltek

Vue.jsでAPIにアクセスするには？

答えて

関連する問題