Search code examples
javascriptangularjsapiyandexyandex-api

^Not running function

For some reason the script does not run, or return answer. The console is nothing. Trying to get an answer to yandex.transtale site (https://tech.yandex.com/translate/doc/dg/reference/translate-docpage/) Code: http://jsbin.com/jolijep/edit?html,js,console,output

var app = angular.module('jsbin', []);

app.controller('DemoCtrl', function($scope, $http) {
  var url = "https://translate.yandex.net/api/v1.5/tr.json/translate";
  keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";
  var vm = this;
  $scope.SendData = function() {
    // тут данные
    var textApi = 'Hello';
    var langApi = 'en-ru';
    var text1 = 'Hello';
    var data = "key=" + keyAPI + "&text=" + textApi + "&lang=" + langApi;


    $http.post(url, data)
      .success(function(data, status, headers, config) {
        vm.data = response.data;
        $scope.PostDataResponse = data;
        console.log(data);
      })
      .error(function(data, status, header, config) {
        $scope.ResponseDetails = "Data: " + data +
          "<hr />status: " + status +
          "<hr />headers: " + header +
          "<hr />config: " + config;
      });
  };
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="weather.js"></script>
</head>

<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as vm">
    <script src="weather.js"></script>
    <button ng-click="SendData()">Send</button>
    <br>Data: {{PostDataResponse}}
    <br>{{vm.data}} {{vm.PostDataResponse}} Data: {{scope.PostDataResponse}} {{vm.data}}
  </div>
</body>

</html>

Solution

  • If you look at the Yandex translate API reference, it has asked you to pass the information for the request you are making in the form of the params(parameter). These parameters are to be appended to the request URL.

    Other ways of getting information from an API with a POST request is to pass information in the form of the body of that request.

    But the Yandex translate API with the POST request is asking for the information attached to the url.

    var data = "key="+keyAPI+"&text="+textApi+"&lang="+langApi

    this data variable should be getting appended to the url variable when the POST request is made to the API. But,

    $http.post(url, data)

    Invoking $http method makes the data interpreted as the body of the post request instead of appending the data variable to url while making the call.

    A much cleaner and proper implementation for $http API of the AngularJS would be to put all you parameters inside an object where the keys are the parameter type and values are the parameter values.

    var params = {
      key: keyAPI,
      text:textApi,
      lang:langApi
}

    Now in the params object, you are hold all the information you wanted to pass while making the request.

    Secondly, you need to the modify the $http request so that it knows what params are to be appended to the url. I am using more basic $http method instead of $http.post method,I will clearly mention what should be the base url, type of method for the HTTP request and lastly, the params that are to passed with the request to the API.

    $http({
   url: url,
   method: 'POST',
   params: params
})
.success(function(data,headers,status,config){
  $scope.PostDataResponse = data;
  vm.data = data;
  console.log(data);
 })
.error(function(data,headers,status,config){
 $scope.ResponseDetails = "Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + header +
                "<hr />config: " + config;
});

    Another thing which was wrong in your code was the initialization of $scope.PostDataResponse

     $scope.PostDataResponse = response.data; //You are not getting any argument named response by the success function call

    Correct way to do it will be $scope.PostDataResponse = data;

    Now if you run the code with the modification it should run pretty fine.

    If everything is done correctly, then in the developer console you would find an object logged after the success of the request.

    Object with the success of the call

    In your webpage also, you would see the same object.