<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="sample">
<button ng-click="test()">Request data</button>
<br />
{{jsonString}}
</body>
</html>
angular.module('app', [])
.controller('sample', function ($scope, $http) {
$scope.method = 'POST';
$scope.url = 'https://translation.googleapis.com/language/translate/v2?key=AIzaSyA1bHYc3VOCxotWBY5T61z31C91xgl4Kck';
$scope.data = {
"q" :"Search",
"source": "en",
"target": "es"
};
$scope.header = {'Content-Type': 'application/json'};
$scope.test = function() {
var source = {
"header": {
"Home": "Home",
"Join": "Join",
"Login": "Login",
"Favorites": "Favorites",
"Signout": "Signout",
"Hi": "Hi",
"Wishlist": "Wishlist",
"Cart": "Cart",
"Search": "Search"
},
}
$scope.sourceArray = source;
angular.forEach(source, function(value, key) {
var outerObjKey = key;
var outerArr= source[key];
angular.forEach(outerArr, function(value, key) {
var innerObjKey = key;
var data = {
"q" :value,
"source": "en",
"target": "es"
};
$scope.fetch(data,outerObjKey,innerObjKey,source)
})
});
}
$scope.fetch = function(dataToChange,outerKey,innerKey,scrArr) {
$http({method: $scope.method, url: $scope.url,data:dataToChange,headers:$scope.header})
.success(function(data, status) {
$scope.status = status;
$scope.sourceArray[outerKey][innerKey] = data.data.translations[0].translatedText;
console.log(JSON.stringify($scope.sourceArray));
$scope.jsonString = JSON.stringify($scope.sourceArray);
})
.error(function(data, status) {
$scope.status = status;
$scope.data = "Request failed";
});
};
});