Rxjs: Ajax methods not parsing settings objext

Created on 17 Nov 2016  路  9Comments  路  Source: ReactiveX/rxjs

Ajax methods is not parsing settings object, but treat it as url string. Docs here

RxJS version:
^5.0.0-rc.1
Code to reproduce:

import Rx from 'rxjs'
import { ajax } from 'rxjs/observable/dom/ajax';

function getFolderStructure(action$) {
  return action$.ofType(types.GET_FOLDER_STRUCTURE)
    .flatMap((action) => ajax.get({
        url: '/api/some/endpoint',
        body: { problem: 'here' },
        responseType: 'json'
      }).map(actions.getFolderStructureCompleted)
    );
}

Expected behavior:
Generates request
http://localhost:8080/api/some/endpoint/?problem=here
Actual behavior:
Generates request
http://localhost:8080/[object%20Object]
Additional information:
Whole settings object passed into the method ajax.get() is handled like url

Most helpful comment

There are several problems within ajax:

  • 1. GET request parameter parsing - the only way to create GET request with parameters is only manually creating url (ajax.get('myulr/?param=myparam'), nothing like ajax.get(url, {param: 'myparam'}) exist
  • 2. POST and PUT request nested parameter parsing - when creating request like:
const payload = {a: 1, b:2, c: {d:3}}
ajax.post(url, payload) // generates {a:1, b:2, c: "[object Object]"} 

nested parameter are not parsed

All 9 comments

Documentation you've referred is for v4, and v5 has breaking changes compare to v4 and docs are not compatible. Currently ajax interface for get is get(url: string, headers?: Object): Observable<AjaxResponse>;, does not support object as parameter. (https://github.com/ReactiveX/rxjs/blob/6cf7296089adfacec0942e67031718ad78aae95e/src/observable/dom/AjaxObservable.ts#L66)

@kwonoj Thank you. Can you give me a working example (without typesctipt) please?

Test cases are usually most straightforward code snippet example, for cases like get it can be found at https://github.com/ReactiveX/rxjs/blob/master/spec/observables/dom/ajax-spec.ts#L415

@kwonoj Now, it is correctly parsed, but with GET request, body param is ignored. POST and PUT requests are working. Is there a way to add url parameter in GET similar to jQuery param() ?

There are several problems within ajax:

  • 1. GET request parameter parsing - the only way to create GET request with parameters is only manually creating url (ajax.get('myulr/?param=myparam'), nothing like ajax.get(url, {param: 'myparam'}) exist
  • 2. POST and PUT request nested parameter parsing - when creating request like:
const payload = {a: 1, b:2, c: {d:3}}
ajax.post(url, payload) // generates {a:1, b:2, c: "[object Object]"} 

nested parameter are not parsed

Side note: You're not supposed to send a body with GET.

The lack of clear examples for the latest version api is making it problematic to say the least. Tests and outdated documentation mean that its always a struggle to find any solutions. @javorka is correct, there is a range of issues with ajax, yet there is no solution or example offered. It has got to the stage where we are considering dropping the use of Observable ajax in favour of a more well documented library.

The test example snippets do not show how to pass along parameters, which I believe to be the crux of the issue here.

I admit the doc is not great but if you are setting up the header and the body properly
you will not end up with [Object object] as parse body

here is something who works like a charm for me :)

...
headers: {
  'Content-Type': 'application/json',
},
body: JSON.stringify(people)
...
Was this page helpful?
0 / 5 - 0 ratings

Related issues

chalin picture chalin  路  4Comments

peterbakonyi05 picture peterbakonyi05  路  4Comments

benlesh picture benlesh  路  3Comments

benlesh picture benlesh  路  3Comments

Zzzen picture Zzzen  路  3Comments