0

I can't find a method to append a query string to page url in angular (without using jQuery).

It does not work to simply add the string as queryParams, like this:


    this.router.navigate([],
     {
      queryParams: { queryString }
     }
    );

because Angular automatically add in url the name of queryParam


    localhost:4200/?queryString=...

And I also tried to use empty string


    this.router.navigate([],
     {
      queryParams: { "": queryString }
     }
    );

but I had same problem (Angular added empty string in url)


    localhost:4200/?=...

I also tried to add each Query Parameter in url (one by one) but I can't understand why when I'm doing this, I have as query parameter only the last interation.

I started from this object:

    filters = {
        inspectionAttributes: [
          { inspectionAttributeId: 53, inspectionAttributeValue: 93 },
          { inspectionAttributeId: 53, inspectionAttributeValue: 265 },
          { inspectionAttributeId: 56, inspectionAttributeValue: 214 }
        ],
        status: [1, 2]
    };

I used this method to generate the query string:

    parseJsonAsQueryString(object: any, prefix?: string) {
        const queryString = [];
        for (const property in object) {
          if (object.hasOwnProperty(property)) {
            const value = object[property];
            if (typeof value === "object") {
              const key = prefix ? prefix + "[" + property + "]" : property;
              queryString.push(this.parseJsonAsQueryString(value, key));
            } else {
              const key =
                prefix && isNaN(parseInt(property, 10))
                  ? prefix + "." + property
                  : prefix;
              queryString.push(key + "=" + value);
            }
          }
        }
        return queryString.join("&");
      }

And I got that


    ?inspectionAttributes[0].inspectionAttributeId=53&inspectionAttributes[0].inspectionAttributeValue=93&inspectionAttributes[1].inspectionAttributeId=53&inspectionAttributes[1].inspectionAttributeValue=265&inspectionAttributes[2].inspectionAttributeId=56&inspectionAttributes[2].inspectionAttributeValue=214&status=1&status=2

And what I'm actually trying is to append this result to page url, like this


    localhost:4200/?inspectionAttributes[0].inspectionAttributeId=53&inspectionAttributes[0].inspectionAttributeValue=93&inspectionAttributes[1].inspectionAttributeId=53&inspectionAttributes[1].inspectionAttributeValue=265&inspectionAttributes[2].inspectionAttributeId=56&inspectionAttributes[2].inspectionAttributeValue=214&status=1&status=2

I also tried to add each object property one by one to url by modifying the previous method in this way:

    parseJsonAsQueryString(object: any, prefix?: string) {
        for (const property in object) {
          if (object.hasOwnProperty(property)) {
            const value = object[property];
            if (typeof value === "object") {
              const key = prefix ? prefix + "[" + property + "]" : property;
              this.parseJsonAsQueryString(value, key);
            } else {
              const key =
                prefix && isNaN(parseInt(property, 10))
                  ? prefix + "." + property
                  : prefix;
              this.router.navigate([],
                {
                  queryParams: { [key]: [value] },
                  queryParamsHandling: 'merge'
                }
              );
            }
          }
        }
      }

So, I didn't push anymore the values into an array and I'm trying to append each time the pair of key->value to the current url. But using this method, I can't understand why, I got just the last interation in url:


    localhost:4200/?status=2

3
  • queryParams: { myParam: '123' } - I feel like there is a lot of the code you just copy pasted and have no idea what it's doing. Please make sure you understand it. Commented Jul 22, 2019 at 6:40
  • And having a queryString like this one: ?inspectionAttributes[0].inspectionAttributeId=53&inspectionAttributes[0].inspectionAttributeValue=93&inspectionAttributes[1].inspectionAttributeId=53&inspectionAttributes[1].inspectionAttributeValue=265&inspectionAttributes[2].inspectionAttributeId=56&inspectionAttributes[2].inspectionAttributeValue=214&status=1&status=2. How should I use your method ? Commented Jul 22, 2019 at 6:43
  • Possible duplicate of Angular: append query parameters to URL Commented Jul 22, 2019 at 7:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.