title: Angular 7 HTTP GET send JSON object as a parameter
body: <p>Im trying to send a json structure to a rest service from angular doing something like this </p>
  
  <pre><code>  let test5var = {
                      "test5var1": {
                          "test5var2": "0317",
                          "test5var3": "9556"
                      },
                      "test5var4": "123",
                      "test5var": "0000046"
                  }
  let dataPrincipalBlnc = {"test": {"test1": {"test2": "0317","test3": {"IDIOMA_ISO": " en","DIALECTO_ISO": "US"},"channel": "INT"},"input": {"test5": test5var}}};
  
  let headers = new HttpHeaders();
      headers.append('Content-Type', 'application/json');
  
      let params = new HttpParams().set("requestData", dataPrincipalBlnc.toString()).set("authenticationType", this.authType);
  
  
      return this.http.get(this.url, {params: params}); 
  </code></pre>
  
  <p>The result of the request should look like follows:</p>
  
  <p><a href="https://example.com/test?authenticationType=cookie&amp;requestData=%7B%test%22:%7B%22test1%22:%7B%22test2%22:%220317%22,%22test3%22:%7B%22IDIOMA_ISO%22:%22+en%22,%22DIALECTO_ISO%22:%22US%22%7D,%22channel%22:%22INT%22%7D,%22input%22:%7B%22test5%22:%7B%22test5var1%22:%7B%22test5var2%22:%220317%22,%22test5var3%22:%229556%22%7D,%22test5var4%22:%22123%22,%22test5var5%22:%220000986%22%7D%7D%7D%7D" rel="noreferrer">https://example.com/test?authenticationType=cookie&amp;requestData=%7B%test%22:%7B%22test1%22:%7B%22test2%22:%220317%22,%22test3%22:%7B%22IDIOMA_ISO%22:%22+en%22,%22DIALECTO_ISO%22:%22US%22%7D,%22channel%22:%22INT%22%7D,%22input%22:%7B%22test5%22:%7B%22test5var1%22:%7B%22test5var2%22:%220317%22,%22test5var3%22:%229556%22%7D,%22test5var4%22:%22123%22,%22test5var5%22:%220000986%22%7D%7D%7D%7D</a></p>
  
  <p>But it is currently sent as:</p>
  
  <p><a href="https://example.com/test?requestData=%5Bobject%20Object%5D&amp;authenticationType=cookie" rel="noreferrer">https://example.com/test?requestData=%5Bobject%20Object%5D&amp;authenticationType=cookie</a></p>
  
  <p>Any ideas how can I send the json object to looks as the first request? Do I need to manually convert the json to a valid uri format?</p>
  
  <p>In angularJS is working fine just using the following code:</p>
  
  <pre><code>var data = {
        "test1": {
          "test2": {
            "test3": "0317",
            "test4": {
              "IDIOMA_ISO": " en",
              "DIALECTO_ISO": "US"
            },
            "channel": "INT"
          },
          "input": {
            "test5": test5var
          }
        }
  };
  $http.get(url, {
        params: {
          authenticationType: authType,
          requestData: data
        }
      }).then(success(deferred), error(deferred));
  </code></pre>
  
  <p>I have also tried using the following code but the result is adding more characters and the backend is failling because it says the JSON is not in a valid format:</p>
  
  <pre><code>encodeURIComponent(JSON.stringify(dataPrincipalBlnc)
  </code></pre>
  
  <p>?requestData=%257B%2522test%2522%253A%257B%2522test1%2522%253A%257B%2522test2%2522%253A%25220317%2522%252C%2522test3%2522%253A%257B%2522IDIOMA_ISO%2522%253A%2522%2520en%2522%252C%2522DIALECTO_ISO%2522%253A%2522US%2522%257D%252C%2522channel%2522%253A%2522INT%2522%257D%252C%2522input%2522%253A%257B%2522test5%2522%253A%257B%2522test5var1%2522%253A%257B%2522test5var2%2522%253A%25220317%2522%252C%2522test5var4%2522%253A%25229556%2522%257D%252C%2522test5var4%2522%253A%2522123%2522%252C%2522test5var5%2522%253A%25220003303%2522%257D%257D%257D%257D&amp;authenticationType=cookie</p>
  
  <p>Thanks
  Regards</p>