What is the method for configuring Google API's free Translate service to provide results in JSON format?

Looking to integrate a free Google translation API into my Chrome extension. You can access the API using this URL:

The response from the API is in the format of an array, with a sample result like this:

[[["नमस्ते","hello",,,1]],,"en"]

Currently, my extension uses the Yandex translation API, which returns data in JSON format. Here is the Yandex API URL for reference:

The response from the Yandex API looks like this:

{"code":200,"lang":"en-hi","text":["नमस्कार"]}

Exploring if there are any possibilities to utilize the mentioned free Google translation API within my extension.

Answer №1

To translate a JSON Object, you can use the Plunker code provided below. Feel free to modify the source and target languages in the code as needed. Plunker Code

You may also format the JSON using this tool

Here is a snippet of the sample code from the link

$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";
});
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enabling communication between my React frontend and Express server

I currently have a Digital Ocean Ubuntu VPS set up with Apache, Node, and Mongo running. I can successfully retrieve data from my database using CURL on the server and my node backend is running on port 3000. For my React frontend, I am using Fetch and it ...

The Bootstrap modal-backdrop dilemma requiring JavaScript intervention

I am encountering some problems with the Bootstrap modal. When I try to open a modal, everything looks good, but when I close it, the screen turns completely black. Upon closer inspection, I found that every time I click on the X to close the modal, there ...

Issue encountered while retrieving the initial element using .parent().search('img').eq(0)

I'm trying to extract an 'img' element inside an 'a' tag, but unfortunately, I'm having trouble achieving this. Here is the HTML code: <table class="table table-bordered"> <thead> <tr> ...

Removing characters from a string with regular expressions

I need to eliminate instances of << any words #_ from the given text. stringVal = "<<Start words#_ I <<love#_ kind <<man>>, <<john#_ <<kind man>> is really <<great>> <<end words#_ "; The d ...

Retrieve a specific portion of a deeply nested JSON object and display only the key-value pairs that pique my interest within that subset

I possess a deeply embedded json file: My goal is to extract and analyze only the subset I am interested in, specifically all content within the 'node' key. How can I achieve this? Extract the subset of this json file that contains "edges ...

Improvement in Select2 Change Event: Update the subsequent select2 box options based on the value change in the preceding select2 box

I need assistance with two select boxes, namely Category and Sub-category. My objective is to dynamically alter the available options in the subcategory box based upon the value selected in the category box. Additionally, I would like to load data for the ...

Displaying Laravel's validation errors within the Ajax success event

When attempting an Ajax request and anticipating a failure, I find that the error response is unexpectedly being received within the success event instead of the fail event. I require Laravel's response to be directed to the Ajax fail event, as I int ...

Engage with it to access the get feature

Looking for help with updating information in a websql database using a function. Currently, I'm facing an issue where the loading box closes before the get function completes its task, leading to incomplete updates. I need a solution where the next ...

Encountering the error message "Cannot GET /" in a NodeJS Express

I've been experimenting with various approaches to resolve this issue, ranging from app.use(express.static(__dirname + "public")) to res.render. It seems to function correctly in my terminal environment but fails when I try to access it locally. Can a ...

How can I make my webpage unselectable except for specific content within a div using CSS and JavaScript?

During a live editing session, I am looking to make only specific portions of the page selectable. Can someone provide guidance on how to disable selection for everything except within a particular div? ...

Using Flask and AngularJS: Managing Scope in a Controller with Flask Templating

Currently, my primary objective is to create a table with sortable columns. While following a tutorial and attempting to implement it into my project, I have encountered an issue. It seems that the structure of my code will not allow this functionality to ...

Display information from a JSON file using Vue.js

Hello, I am currently attempting to display data from a JSON file using Vue.js. Below is my Vue file: <template> <div> <div class="card"> <div class="card-header"> <h4 class="card-title" ...

Encountering issues with AJAX requests using jQuery

Hey there, I'm attempting to make an AJAX call in a C# page and I'm running into some issues. Below is my jQuery code: $(document).ready(function () { $.ajax({ type: "POST", url: "conteudo.aspx/GetNewPost", data: { i ...

JavaScript can be used to open several tabs simultaneously within a single browser window

Looking to open multiple tabs in the main browser? Check out this code snippet: function openSM() { window.open("http://www.google.com","_blank"); window.open("http://www.yahoo.com","_blank"); window.open("http://www.bing.c ...

Retrieve the chosen date from a DatePicker using a Javascript function

Is there a way to retrieve the user-selected date using a JS function? I attempted this method: var test = $("#datepicker").datepicker( 'getDate' ); However, when I display it with an alert, it shows [object object] instead of the date. This ...

Cannot retrieve authorization cookie

Currently, I am in the process of setting up backend authentication using Express, Node, and Supabase for my frontend built with React. //auth.js import { supabase } from "../config/supabaseConfig.js"; export const checkAuthorizationStatus = asy ...

Ways to retrieve the innerHTML content in Mozilla Firefox

Look at this HTML code snippet: <div id="divTest"> Hello <input type="text" id="txtID" value="" /> <input type="button" onclick="getForm();" value="Click" /> </div> Also, check out this JavaScript function for retrievi ...

Troubleshooting problem with Angular $scope and ng-if/ng-show: View status remains unchanged

Utilizing Firebase for authentication in my web app, I have implemented buttons on various pages that should only be visible when the admin is logged in. Despite using ng-if to display the button if 'loggedin' equals true, the buttons refuse to a ...

Incorporating the latest version of SMINT into your Shopify store

Appreciate the help you're about to give. Here's the process of incorporating Smint v3.0 into Shopify: Added jquery.min.js and jquery.smint.js to asset files Inserted the following code within the tag of theme.liquid {{ 'jquery.mi ...

How to efficiently pass props between components in NextJs

This is the project's file structure: components ├─homepage │ ├─index.jsx ├─location │ ├─index.jsx pages │ ├─location │ │ ├─[id].jsx │ ├─presentation │ │ ├─[id].jsx │ ├─_app.jsx │ ├─index.jsx ...