When integrating AngularJS $http with WordPress, the desired response may not always be achieved

I recently implemented a wp_localize_script for ajax in my WordPress project:

wp_localize_script('cb_admin_js', 'cbAjax', array('ajax_url' => admin_url( 'admin-ajax.php' )));

As part of testing, I used an $http.get() in Angular:

$http.get('http://localhost/wp-admin/admin-ajax.php',{action:'get_saved_cover'}).then(function(data){
        console.log(data);
    });

The goal of my function was to retrieve and return a list of cars:

add_action( 'wp_ajax_nopriv_get_saved_cover', 'get_saved_cover' );
add_action( 'wp_ajax_get_saved_cover', 'get_saved_cover' );

function get_saved_cover(){
    $cars=array("Volvo","BMW","Toyota");
    return json_encode($cars);
    wp_die();
}

However, when I make the request, all I receive back is data: 0, status: 200, and some other standard responses in an array. It seems like there might be a missing piece that Angular requires or something else causing the issue.

Answer №1

Update the angular http parameter to use "params" instead of "data"

$http({
    url: 'http://localhost/wp-admin/admin-ajax.php',
    method: "GET",
    params: {action: "get_saved_cover"}
}).then(function (response) {
   console.log(response.data);
});

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

Align audio and video elements in HTML5 using JavaScript

I am facing a situation where I have two files - one is a video file without volume and the other is an audio file. I am trying to play both of these files using <audio> and <video> tags. My goal is to make sure that both files are ready to pla ...

Updating radio button based on selection change in jQuery

I'm struggling with jQuery and can't seem to figure out how to change the selected radio button based on a value in another select box. <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" na ...

Using Javascript's document.write function to modify the content of a PHP page

Here is a Javascript function that capitalizes the first letter of a string: function capitalizeFL(string) { return string.charAt(0).toUpperCase() + string.slice(1); } In a file named statuswindow.php, there are PHP scripts that use this function to ...

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Currently, I am executing a script inside a Pug template. The script commences by fetching an array of JSON objects from MongoDB. I then stringify the array (data) and proceed to loop through it in order to access each individual JSON object (doc). Subsequ ...

Tips for testing the setTimeout function within the ngOnInit using Jasmine

Could someone please assist me with writing a test for an ngOnInit function that includes a setTimeout() call? I am new to jasmine test cases and unsure of the correct approach. Any guidance would be greatly appreciated. app.component.ts: ngOnInit(): void ...

Can the tooltip of an element be changed while the old tooltip is still visible without having to move the mouse away and then back again?

When I have an HTML anchor element with a tooltip that appears when the mouse is hovered over it, and then I use JavaScript to change the tooltip's text using element.title = "Another Tooltip", the new tooltip text does not immediately update visually ...

What is the method for pulling information from MySQL and presenting it on a website using Node.js?

Currently, my goal is to retrieve data from MySQL and showcase it on my HTML page. The code snippet in server.js looks like this: const path = require('path'); const express = require('express'); const bodyParser = require("body-pa ...

Having trouble retrieving the $scope variable in the same controller

Recently, I encountered an issue with a form submit button in my main.html view. It seems that the fileContent variable is not updating as expected when navigating between views. <div ng-init="init()" ng-controller="ReadController"> <button t ...

Major Technical Issues Plague School-wide Celebration

In my JavaScript code, I am creating a 16x16 grid of divs. Each div should change its background color from black to white when the mouse enters (inherited based on a common class). However, I am facing an issue where all the divs change color simultaneou ...

Receiving a positive server response without needing to trigger the Ajax route in a NodeJs/Express application

Setting up the login route: app.use('/login', require('./routes/login')); The 'login' module includes the route to display the login HTML page and validate the login using an Ajax call. var router = require('express&ap ...

When using the Google API load callback, the Angular(4) router does not actually replace routes; instead, it stacks them up each time

I've been attempting to implement Google Authentication in my Angular 4 application. I have successfully loaded the Google platform.js and api.js in my index.html file. When I click on the login button, this is what I have coded: gapi.load('auth ...

Issue with AngularJS: error:areq Invalid Argument

<!DOCTYPE html> <html ng-app> <body data-ng-controller="SimpleController"> <div class="container"> Title: <br/> <input type="text" ng-model="title" />{{title}} <br/> ...

What is the process for including an SVG file in my JavaScript .textContent?

I've been struggling to add an exclamation SVG to this section, but for some reason I can't make it work. I've searched on Google for a solution, but haven't found one yet. The SVG file is already downloaded and stored in my project fo ...

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

Guidance on incorporating CSS into ES6 template literals within a react framework

I am trying to implement the Material UI stepper in my React application. The step content is set up as a string literal. My goal is to include CSS styling for paragraphs within the step content. Many online resources suggest using \n to add a line ...

What is the best way to fetch JSON data in React from the start and then manipulate it as needed before exporting to another file within my application?

I have a scenario where I need to fetch data from a MongoDB database using async/await fetch() and save it in a file called data.js. However, I am facing an issue with React executing "in parallel" due to the nature of async/await. This makes it difficult ...

Tips for moving text within a Canvas using a button to trigger the function that displays the text in a Javascript environment

Within my HTML, there is a canvas element with the id="myCanvas". When a button is clicked, it triggers this particular function: function writeCanvas(){ var can = document.getElementById("myCanvas"); var ctx = can.getContext("2d"); va ...

I'm having trouble with my controller - not sure what the problem is

My controller seems to be malfunctioning. I have created a controller but it is not functioning properly. Even though I have reviewed it multiple times, the issue persists. Could someone please assist me with this problem? Angular Code var myPanelSearch ...

Error: TweenLite has not been recognized

/justincavery/pen/mPJadb - this is a link to CodePen After copying the code from CodePen and running it, I encountered an error: "Uncaught ReferenceError: TweenLite is not defined". The image only draws once and there is no animation unless I press "F5 ...

When examining an element in an Angular application using Chrome Dev Tools, why do I not observe raw HTML code?

Just as the title suggests, my question is: Even if browsers don't understand Angular, why am I able to see Angular elements while inspecting the DOM despite using AOT (Ahead-Of-Time Compilation) which means there is no Angular compiler in the browse ...