Utilizing emailyak to send an email within an AngularJS function

After creating an emailyak account, I attempted to send an email using a JavaScript function. While I was able to successfully send an email with a curl command, I encountered difficulties when trying to replicate the same function in JavaScript.

Here is the curl command I used:

curl -H "Content-Type: application/json" -d '{"FromAddress" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef7f0f8f1def3e7faf1f3fff7f0b0edf7f3eef2fbe7fff5b0fdf1f3">[email protected]</a>","FromName" : "My App","ToAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf2fffcfff2def9f3fff7f2b0fdf1f3">[email protected]</a>","Subject" : "Test","TextBody" : "Hello"}' https://api.emailyak.com/v1/my_api_key/json/send/email/

However, my JavaScript equivalent did not work. The code snippet I used in my Angular controller is:

.controller('AppointmentCtrl', function($scope, Services) {
    $scope.sendMail = function() {

        var req = {
            method: 'POST',
            url: 'https://api.emailyak.com/v1/my_api_key/json/send/email/',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            data: {
                "FromAddress" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="244d4a424b64495d575146404b49454d4a0a574d495448415d454f0a474b49">[email protected]</a>",
                "FromName" : "My App",
                "ToAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666865666865446369656d682a676b69">[email protected]</a>",
                "Subject" : "Subject",
                "TextBody" : "Body"
            }
        };

        $http(req).

            success(function(data, status, headers, config) {
                // this callback will be called asynchronously
                // when the response is available
                alert("Success");
                //return data;
            }).

            error(function(data, status, headers, config) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
                alert("Error:"+JSON.stringify(status));
                //return false;
            });
    }
});

In my HTML, I implemented the button as follows:

<button ng-click="sendMail()" class="button button-positive button-block">
    Send
</button>

This issue occurred in an Ionic framework application while testing in the iOS Simulator. The simulator has a working internet connection and emailyak appears to be functioning correctly when tested in the terminal. What could be the cause of this problem?

Answer №1

Upon reviewing your sample code, the initial observation that stands out is the absence of the $http module being injected into the controller function.

Consider this line:

.controller('AppointmentCtrl', function($scope, Services) {

It would be more appropriate to have:

.controller('AppointmentCtrl', function($scope, $http, Services) {

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uploading files in AngularJS without the need for external plugins

I am in need of code to enable multiple uploads using Angular. The requirements for this task include displaying the name and size of a file before it is uploaded, without the use of any plugins. Additionally, the code needs to be compatible with IE9. Ca ...

Client-side sorting in jqGrid

I'm working with a tree-grid that has autoloading rows. My objective is to sort the grid by the tree column directly on the client side. However, every time I click on the column header to sort, it triggers an unnecessary Ajax call for sorting, when ...

Strategies for capturing a 404 error in an Express router

Trying to capture the 404 page not found error in an express router. Using a simple example : const express = require('express'); const app = express(); const router = express.Router(); // ROUTER MID BEFORE router.use((req, res, next) => { ...

Sending back an array within the onOpen function

I am currently in the process of developing a chat application. At this stage, users are able to send messages to each other and I have successfully stored these messages in my database. Now, my objective is to display the stored messages from the database ...

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

Making an Ajax request to retrieve progress information by utilizing IProgress

I have encountered an issue with my code involving 2 ajax API calls. One call fetches data through a lengthy process, while the other retrieves progress values using the IProgress interface and runs every 5 seconds. The value from ReportProgress successf ...

Vanishing Items - Three.js CanvasRenderer

I'm in a bit of a pickle here. I can't figure out why my objects are disappearing when using the canvas renderer. Strangely enough, everything works fine with the webGL renderer. Unfortunately, I need to make sure this displays properly on mobile ...

PHP/Web Script Security Measures

Searching for ways to safeguard a PHP and javascript script to maintain ownership and sell it as my own creation. Curious about different methods for protecting the script post-sale. Is there a way to prevent buyers from distributing it as their own? Con ...

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

Tips for including parameters in an array of values when using getStaticPaths

I'm trying to retrieve the slug value that corresponds with each number in the getStaticPaths for my page structure: /read/[slug]/[number]. The code I have is as follows: export async function getStaticPaths() { const slugs = await client.fetch( ...

Issue: The hydration process has failed due to a discrepancy between the initial UI and the server-rendered content when utilizing the Link element

Exploring Next.js, I stumbled upon the <Link/> component for page navigation. However, as I utilize the react-bootstrap library for my navbar, it offers a similar functionality with Nav.Link. Should I stick to using just Link or switch to Nav.Link? ...

I am struggling to capture the user's input and display it on a webpage using HTML and JavaScript. Can you help me identify where I may be going wrong in this process?

Good day! I am fairly new to the programming world and have recently embarked on my first JavaScript project. I've chosen to create a simple budgeting app. However, I'm struggling with displaying user input on the page. Something seems off with ...

Implementing the ability to add and remove classes in JavaScript

I am trying to implement an add or remove class feature in JavaScript, but I'm facing some issues with it. Below is the code snippet I have: if (window.location.hash == "#/profile/"){ document.getElementById("tabMenu").removeClass("bottomTa ...

Set up counters for a variety of Owl Carousel sliders

I am looking to set up multiple owl carousel sliders, where each slider has a counter to track its position. I want the counters to update independently, but I'm running into issues with them not working correctly. Each slider should display a counte ...

How to retrieve the content/value from a textfield and checkbox using HTML

I'm encountering an issue with my HTML code where I am unable to extract data from the HTML file to TS. My goal is to store all the information and send it to my database. Here is a snippet of the HTML: <h3>Part 1 : General Information</h3 ...

What is the method of using "*" as the value for allowedModules in a jsreport configuration file to enable all modules?

I am having an issue when trying to generate a report using jsreport STUDIO. The error message I received is as follows: An error occurred - Error during rendering report: Unsupported module in scripts: request. To enable require on a particular module, ...

Populate a JSON table in React with checkboxes and automatically mark them based on the JSON data

I'm currently working on creating a React table using JSON data like this: [ { "Id_side": 123, "Name_side": "R4", "Name_cycle": "C1" }, { "Id_side": 345, "Name_side": "M1", "Name_cycle": "C2" ...

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

Utilizing AngularJS to Showcase Information

I have data retrieved from a database that I want to display in a table. Utilizing Jersey as my back-end framework, I successfully tested the functionality using Postman. However, I am encountering an issue when trying to display this data in the front-end ...

Maintaining Styles After Focus is Removed in CSS: A Guide

The CSS that styles our buttons is as follows: .btn-outline-primary { color: blue; border: 1px solid blue; background: transparent; transition: all 0.3s ease 0s; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: ...