I need to do a http request to a mail chimp subscription list via a component post

Question

I need to do a http request to a mail chimp subscription list via a component post

I've read the mail chimp documentation and couldnt find anything on this. I also tried their mail chimp embedded form in an angular 2 html5 view but that doesnt work for some weird reason.

So I've resulted to doing a http request to the subscribe list instead and I'm having trouble getting that working.

I'm using typescript, angular2 and mail chimp

This is my code so far:

  subscribe = () => {
        var url = "https://mysubscriptionlist.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;    
        this.jsonp.request(url).subscribe(response => {
           console.log(response);
        });   
  }

This is my current console log error in chrome:

Uncaught SyntaxError: Unexpected token <

Sateia

Could you check the response through the "Network" tab ? It's probably returning an error instead of json – Terribly

The reason is apparent if you open url in new tab. – Haruspicy

Answer 1

I finally found out how to fix your issue. You need to use the Jsonp support of Angular2.

Your address supports Jsonp by adding a c query parameter to your URL and switching https://mysubscriptionlist.us10.list-manage.com/subscribe/post by https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json. You need to put the JSONP_CALLBACK value in it (see this issue: https://github.com/angular/angular/issues/5613).

In this case, you will have the following response payload:

JSONP_CALLBACK (
{
  "result": "success",
  "msg": "Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you."
}
)

After having registered JSONP_PROVIDERS when calling the bootstrap function:

import {bootstrap} from 'angular2/platform/browser'
import {JSONP_PROVIDERS} from 'angular2/http'
import {AppComponent} from './app.component'

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

You can then execute your request using an instance of the Jsonp class you injected from constructor:

import {Component} from 'angular2/core';
import {Jsonp} from 'angular2/http';

@Component({
  selector: 'my-app',
  template: `
    <div>
      Result: {{result | json}}
    </div>
  `
})
export class AppComponent {
  constructor(jsonp:Jsonp) {
    var url = 'https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json?u=(...)&subscribe=Subscribe&[email protected]&c=JSONP_CALLBACK';
    jsonp.request(url, { method: 'Get' })
     .subscribe((res) => {
       this.result = res.json()
     });
  }
}

See this plunkr for a working sample: http://plnkr.co/edit/dqreqBL6kyNkR8Z2wgGR?p=preview

Bethelbethena

I now have a 200 ok message which is good. But now its not adding the to mail chimp subscription list. It was because we started using jsonP – Sateia

I get no errors and all looks fine. But users not added – Sateia

In fact, I received a confirmation email for on the email address I set in the request. There is a link in to to confirm the subscription ;-) I clicked on the link in the email. You should see me appeared... – Bethelbethena

All works fine now - thanks for your help. Mail chimp was being slow sending the emails – Sateia