Using Angular 2 to call jQuery based Javascript ajax library

Question

I have a feeling that I'm just trying to fit a square peg into a round hole, but I'm trying to apply some things with Angular2 and Typescript, and I'm banging my head against a wall.

I've written a Javascript module that acts as an API client library to an API I'm consuming. It just packages some convenience things like setting up the correct API keys, switching keys based on certain desired data, etc. It's basically just a convenience library.

Most of the methods follow a pattern where you provide a query term and then execute a callback.

So for example:

API.searchAutocomplete("angular", function(err, data) {
    // handle the data/error
});

Inside that method:

searchAutocomplete: function(query, callback) { // set up request with data payload, url, headers, etc

  $.ajax(settings)
    .done(function(response) {
      // callback with success
    })
    .fail(function () {
      // callback with error
    });
}

I'm struggling with trying to understand how to run this function in Typescript in an Angular service with a Promise (square peg round hole). Or should I just pass a callback within the service and treat it like it's Javascript?

My attempt:

public getAutocomplete(query:string): Promise < any > {
    return new Promise((resolve, reject) => {
        API.searchAutocomplete(query, function (err, result) {
            if (err) {
                reject(err);
                return;
            }
            resolve(result);
        });
    });
}

Second, I've been able to load the library into my Angular app but I can't seem to actually make any of the requests. Even if I break in the console and access the library object it doesn't seem to actually make any network requests. Which I really don't understand.

Edit: I've sorted this part out.

When I made my service call return a promise, I had to subscribe to the promise otherwise I wouldn't execute it correctly. I think I still need to understand how to write my service call to return an observable and map the callback response.

Have you debugged through searchAutocomplete method? can you post the code within this method? — Madhu Ranjan
– Madhu Ranjan, Commented Sep 2, 2016 at 4:25
If I use the library outside of Angular it works just fine. So code wise, it definitely does it's job. — kermitology
– kermitology, Commented Sep 2, 2016 at 16:01
within Angular does the control goes inside the searchAutocomplete function? — Madhu Ranjan
– Madhu Ranjan, Commented Sep 2, 2016 at 16:24

kermitology · Accepted Answer · 2017-05-24 20:28:36Z

1

As expected, I was trying to do more work than I should have.

This is pretty simple, just return an observable that calls the external library.

public autoCompleteResults(query: string): Observable<string[]> {
return new Observable<string[]>(observer => {
  API.searchAutocomplete(query, function (err, result) {
    if (err) {
      console.log(err);
      observer.next([]);
      // OR
      observer.error(err);
      return;
    }

    observer.next(result);
  });
});

}

answered May 24, 2017 at 20:28

kermitology

4936 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Using Angular 2 to call jQuery based Javascript ajax library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related