How to pass multiple JSON object parameters to http POST method in Angular4

Question

I want to pass multiple parameters to http post method in Angular4. Here each parameter is JSON object. Can any one please explain how to pass the JSON parameters. For my following code Request Payload displaying as data=%5Bobject%20Object%5D&obj1=%5Bobject%20Object%5D.

 saveData(data : any): Promise<any> {

    let obj1 : any = {'p_id':'2'};
    let params = new URLSearchParams();
    params.append("data", data);
    params.append("obj1", obj1);

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post('urlContent', params, options).toPromise()
           .then(response => response.json())
               .catch(this.handleError);
}

Just try to encapsulate all data which you want to send with object in JSON structure and send it as one object data. — Ziyaddin Sadygly
– Ziyaddin Sadygly, Commented Oct 12, 2017 at 10:19
Do you mean as the post body? Path parameters? Query string? What is the API expecting? If you want a body, why are you passing them as search parameters? — jonrsharpe
– jonrsharpe, Commented Oct 12, 2017 at 10:20
@Ziyaddin Sadigov I tried with encapsulate, But two JSON object passing as one parameter. I want send to service as two parameters — YYY
– YYY, Commented Oct 12, 2017 at 10:21
@arjun it is better to send it as one unified object and then parse this data to two separate JSON objects in back-end side. — Ziyaddin Sadygly
– Ziyaddin Sadygly, Commented Oct 12, 2017 at 10:25
@ Ziyaddin Sadigov sorry, I dont have access to change back_end. — YYY
– YYY, Commented Oct 12, 2017 at 10:46

YYY · Accepted Answer · 2017-10-31 05:55:38Z

1

Instead of using the URLSearchParams(), I have used the array and passed the data. It works for me.

saveRtlList(data : any): Promise<any> {

        let obj1 : any = {'p_id':'2'};

        let savedata : Array<any> = [];
        savedata.push(JSON.stringify(data));
        savedata.push(obj1 );   
        let values : any = {} as any;  
        values.param = savedata;

        return this.http.post(url, {}, {params:vals}).toPromise()
               .then(response => response.json())
                   .catch(this.handleError);
    }

edited Oct 31, 2017 at 5:55

answered Oct 26, 2017 at 11:18

YYY

3,5105 gold badges23 silver badges26 bronze badges

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

Comments

El houcine bougarfaoui · Accepted Answer · 2017-10-12 10:20:15Z

0

try this :

saveData(data : any): Promise<any> {

    let obj1 : any = {'p_id':'2'};
    let body= {obj1 ,data}; 

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post('urlContent', body, options).toPromise()
           .then(response => response.json())
               .catch(this.handleError);
}

answered Oct 12, 2017 at 10:20

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

1 Comment

YYY Over a year ago

@ Bougarfaoui El houcine, let body= {obj1 ,data}; because of encapsulation, two objects passing as a single object param. I need to pass as two individual object params, please share any other approaches..

Collectives™ on Stack Overflow

How to pass multiple JSON object parameters to http POST method in Angular4

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related