# Passing dynamic query-params as an object in link-to helper

**URL:** <https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136>\
**Category:** Proposals\
**Created:** [November 19, 2015, 9:43am UTC](https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136 "2015-11-19T09:43:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![siva\_abc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/siva_abc/32/16491_2.png) [@siva\_abc](https://discuss.emberjs.com/u/siva_abc)\
**Post date:** [November 19, 2015, 9:43am UTC](https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136/1 "2015-11-19T09:43:51Z")

</div>

Hello, I have a requirement as to pass query-params dynamically.

I have demostrated my idea [here](https://ember-twiddle.com/2819c2b3dc943f5b5c77)

```
model: [ 
      {
      "routeName":"laptop",
      "param": {"color":"blue"}
      },
      {
      "routeName":"mobile",
      "param": {"size":"5.5"}
      },
      {
      "routeName":"notebook",
      "param": {"display":"HD"}
      }
    ];

{{#each model as |obj|}}

     {{#if (equal obj.routeName 'laptop')}}

          {{#link-to obj.routeName (query-params color=obj.param.color)}}
                {{obj.routeName}}
          {{/link-to}}

     {{/if}}

     {{#if (equal obj.routeName 'mobile')}}

           {{#link-to obj.routeName (query-params size=obj.param.size)}}
                {{obj.routeName}}
           {{/link-to}}

     {{/if}}

     {{#if (equal obj.routeName 'notebook')}}
           {{#link-to obj.routeName (query-params display=obj.param.display)}}
                {{obj.routeName}}
           {{/link-to}}
     {{/if}}

  {{/each}}

```

Since, {{link-to}} doesn’t support dynamic querying I had to include checks for passing query-param.

If {{link-to supports dynamic passing of query-params like below

```
    {{#each model as |obj|}}

        {{#link-to obj.routeName (query-params obj.param) }}
              {{obj.routeName}}
       {{/link-to}}

    {{/each}}

```

The code would be more pretty without any if checks !

---

<div class="post-metadata">

**Author:** ![planetexpress69](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/planetexpress69/32/11530_2.png) [@planetexpress69](https://discuss.emberjs.com/u/planetexpress69)\
**Post date:** [March 25, 2016, 9:31am UTC](https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136/2 "2016-03-25T09:31:31Z")

</div>

+1 I aggree! Would be extremely helpful to be able to pass a { param: value } dictionary to query-params.

---

<div class="post-metadata">

**Author:** ![accelerate](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/accelerate/32/11324_2.png) [@accelerate](https://discuss.emberjs.com/u/accelerate)\
**Post date:** [April 7, 2017, 1:34am UTC](https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136/3 "2017-04-07T01:34:46Z")

</div>

I know this is super old, but I just ran into this exact issue, and I found a way to make it work. Note that I don’t think this is actually documented anywhere… I had to look at the source code to [`link-to`](https://github.com/emberjs/ember.js/blob/v2.12.0/packages/ember-glimmer/lib/components/link-to.js#L667) to figure this out.

What you do is create a params array that you pass into `link-to` via the “params” attribute (eg. `{{#link-to params=params}}`). Each element of the array is a route segment (eg. `['cars', 'models', 'years']`), and the last element can optionally be a special query param object of the format:

```
{
  isQueryParams: true,
  values: {
    key1: value1,
    key2: value2
  }
}

```

So in your case, I would set up a Computed property that contains all the params for each object in your model, as such:

```
processed: Ember.computed('model', function() {
  let data = this.get('model').map((obj) => {
    let params = [myObject.routeName];
    let queryParams = { isQueryParams: true, values: {} };
    if (obj.routeName === 'laptop') {
      queryParams.values.color = obj.param.color;
    }
    if (obj.routeName === 'mobile') {
      queryParams.values.size = obj.param.size;
    }
    if (obj.routeName === 'notebook') {
      queryParams.values.display = obj.param.display;
    }
    params.push(queryParams);
    return {
      routeName: obj.routeName,
      params: params
    };
  });
  return data;
}

```

And then in your template, it’d look something like:

```
{{#each processed as |data|}}
  {{#link-to params=data.params}}
    data.routeName
  {{/link-to}}
{{/each}}

```

Again, I don’t think using the `params` attribute of `link-to` or creating a `query-params` object as part of the `params` object is documented anywhere, so I don’t know how much of a hack this is.

---

<div class="post-metadata">

**Author:** ![joykeeper](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/joykeeper/32/13535_2.png) [@joykeeper](https://discuss.emberjs.com/u/joykeeper)\
**Post date:** [July 14, 2017, 4:48pm UTC](https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136/4 "2017-07-14T16:48:33Z")

</div>

@accelerate you saved my life, at least for this evening!

In my project there’s a very specific feature that require this functionality and I can’t see any other way to implement it apart from dynamic query params.

---

<div class="post-metadata">

**Author:** ![lcpriest](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lcpriest/32/12817_2.png) [@lcpriest](https://discuss.emberjs.com/u/lcpriest)\
**Post date:** [August 5, 2017, 3:00pm UTC](https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136/5 "2017-08-05T15:00:18Z")

</div>

I made an ember-helper that generates it for you. Gist here: [https://gist.github.com/lcpriest/db74e742c632372479bee8a65af85825](https://gist.github.com/lcpriest/db74e742c632372479bee8a65af85825)

```auto
import Ember from 'ember';

export function dynamicParams([routeName, params]/*, hash*/) {
  return [
    routeName,
    {
      isQueryParams: true,
      values: params
    }
  ];
}

export default Ember.Helper.helper(dynamicParams);

```

Usage:

```auto
{{link-to 'test-link' params=(dynamic-params routeName dynamicQueryParameters)}}

```

---

<div class="post-metadata">

**Author:** ![Tassos\_Kapetzoglou](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tassos_kapetzoglou/32/13425_2.png) [@Tassos\_Kapetzoglou](https://discuss.emberjs.com/u/Tassos_Kapetzoglou)\
**Post date:** [June 8, 2018, 9:17am UTC](https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136/6 "2018-06-08T09:17:52Z")

</div>

Hey, could you specify what you mean by:

` let params = [myObject.routeName]` ?

Did you maybe mean `let params = [obj.routeName]` ?