Multiple Objects into HttpParams

Question

I have some categories in a formcontrol, I send them in an array of string like this:

[1,4,6]

And that is my actual code:

let categoryIds = new Array<String>()
this.selectedCategories.forEach((value: string, key: string) =>
  categoryIds.push(key))

let requestOptions = {
    params: new HttpParams()
        .set('title', this.createNewForm.controls['title'].value)
        .append('content', this.createNewForm.controls['content'].value)
        .append('categoryids', categoryIds.toString()),              
    withCredentials: true
}

But I want to send them as an array of objects, with the old version of angular Http I was able to do a foreach of the object and append every category. But I don't know how to get every category and make each one an append to params. I need to get like this:

...categoryId=1&categoryId=4&categoryId=6...

little not clear about your q?.. If you want to send it as objects you can set using angular common HttpClient or http but not as params — Karthigeyan Vellasamy
– Karthigeyan Vellasamy, Commented Oct 16, 2017 at 5:56

Rich McCluskey · Accepted Answer · 2018-10-22 23:28:52Z

34

You can use .append to append values to a parameter and give you the result you are looking for when dealing with an array of values. .set is used to set or replace a value for a parameter. So really you should be doing something more like the following:

let httpParams = new HttpParams()
  .set('title', this.createNewForm.controls['title'].value)
  .set('content', this.createNewForm.controls['content'].value);

categoryIds.forEach(id => {
  httpParams = httpParams.append('categoryId', id);
});

const requestOptions = {
  params: httpParams,
  withCredentials: true
};

It's not obvious, but the .append method does not mutate the HttpParams object it was called from but instead returns a new object. This is why we reassign httpParams in the example above. Also, .append can be called without first using .set to set the parameter.

edited Oct 22, 2018 at 23:28

answered Nov 7, 2017 at 18:07

Rich McCluskey

2,0712 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephane Over a year ago

The fact that we need to use an append method instead of a set method was surprising to me. Add to this, that we also need to reassign the object to itself was even more so.

Rich McCluskey Over a year ago

@Stephane I agree that it's confusing at first glance. I updated my answer with a little more detail.

Rahul Verma Over a year ago

@RichMcCluskey sorry for asking a question in comment box because i am ban to ask question on this plateform. my problem is related to this answer so please take a look here stackblitz.com/edit/angular-66qunm

Altaf Shaikh · Accepted Answer · 2018-05-09 05:29:14Z

15

You can create object containing all parameters and pass this object to fromObject property of HttpParamOptons while creating HttpParams

let data={
   firstname:'xyz',
   lastname:'pqr'
}

let body=new HttpParams({fromObject:data})

this.http.post(URL, body, this.header).subscribe(data => {
 ....
}, error => {
 ....
})

answered May 9, 2018 at 5:29

Altaf Shaikh

7798 silver badges20 bronze badges

1 Comment

David Addoteye Over a year ago

your answer has saved me tons of codding.

halfer · Accepted Answer · 2017-10-25 00:02:00Z

1

May be this is what you are looking for

component file:

import { Component } from '@angular/core';
import { HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

data = [
       {id:'_', title:'_', content:'_'},
       ....,
       ....
       ];

mainArr:any = [];

constructor(){}

getCategory(item){
    this.mainArr.push({title:item.title,content:item.content,categoryId:item.id});

   console.log('mainArr',this.mainArr);

   let requestOptions = {
        params: new HttpParams()
        .append('data', this.mainArr),
        withCredentials: true
    }

   console.log('requestOptions',requestOptions);
  }
}

edited Oct 25, 2017 at 0:02

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 16, 2017 at 7:41

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

1 Comment

Juanker Over a year ago

The problem is that I am sending like this "...categoryId=[1,2]", but on api side I need to get like this "...categoryId=1&categoryId=2..." How can I do that?

Collectives™ on Stack Overflow

Multiple Objects into HttpParams

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related