The response from the $http POST request is not returning the expected

I am facing an issue where the $http POST method is not returning the expected response. The required data is located within config instead of data

This is my Http POST request:

for (var i = 0; i < filmService.filmData.length; i++) {
      filmData.push({
        title     :    filmService.filmData[i].title,
        overview  :    filmService.filmData[i].info,
        poster    :    filmService.filmData[i].poster,
        genres    :    filmService.filmData[i].genres,
        release   :    filmService.filmData[i].release

      }); 
}
  var data = angular.toJson(filmData[0]);


     $http({
            method: 'POST',
            url:'/search',
            data: data,
            headers: {
              'Content-Type': 'application/json;charset=utf-8'
          },
        }).then(function successCallback(response) {
            console.log(response); //response received
    });

The response appearing in RED in the console contains the required data:

https://i.sstatic.net/w2NkV.png

javascriptangularjsposthttp-postangularjs-http

Answer №1

Follow these steps to achieve your desired outcome:

  $http({
        method: 'POST',
        url:'/search',
        data: data,
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
      },
    }).then(function successCallback(response) {
        var result = response.data
        console.log(result); //response received
});

Answer №2

In the .then block, make sure to return the config.data value.

The expected outcome will look like this

$http({
    method: 'POST',
    url:'/search',
    data: data,
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    },
}).then(function successCallback(response) {
    var data = response.config.data
    console.log(data); // This is the received response
});

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

How can you display varying information based on a dropdown selection using Material-UI's Select component?

By default, the Select component is populated with the correct data. However, I am facing an issue where selecting the "InReview" option should display the options inside the statusArr and remove the previous ones. Thank you in advance for your help. Her ...

javascriptarraysreactjsmaterial-uimap-function

Can anyone help me with coloring Devanagiri diacritics in ReactJS?

I am currently working on a ReactJS project and I have come across an issue. I would like for the diacritic of a Devanagiri letter to be displayed in a different color than the letter it is attached to. For example: क + ी make की I was wondering ...

javascripthtmlcssreactjstypescript

Executing various tasks concurrently with web workers in Node.js

Looking to read multiple JSON files simultaneously and consolidate the data into a single array for processing on a Node.js server. Interested in running these file readings and processing tasks concurrently using web workers. Despite finding informative ...

javascriptnode.jsjsontypescriptweb-worker

The POST request encountered an error with status code 500 while being processed by the Express.js framework in the IncomingMessage

My current challenge involves creating a HTTP request for a CRUD application using JS. The aim is to add a new user account record to the Logins database. However, every time I attempt this request, it results in a 500 error: To test this, I have written ...

javascriptexpress

What is the best way to inform Angular2 RC1 about updates in the DOM?

Originally inspired by a discussion on Stack Overflow, this scenario presents a simpler use case. The issue at hand is how to inform Angular2 about externally added DOM elements that contain Angular directives. For example, adding a new button with a click ...

angularjsdomangularzonejs

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

javascriptjqueryhtml

What is the process for integrating Android Java code with Node.js code?

I have some code that I am trying to integrate with Node.js for Firebase notifications on my Android application. I found a blog post outlining the implementation here: The Node.js code listens to changes in my Firebase Database and triggers notifications ...

javascriptandroidnode.jsfirebasefirebase-notifications

JavaScript code to verify if a checkbox is selected

Having some trouble making a text box value change based on checkbox status. I've attached a function to the onclick event of the checkbox, but it's not quite working as expected. <div> MyCheckbox <input type="checkbox" id="Check1" name ...

javascripthtmlcheckbox

Serving files from a Node.js server and allowing users to download them in their browser

I am facing an issue with my file repository. When I access it through the browser, the file automatically downloads, which is fine. However, I want to make a request to my server and then serve the file result in the browser. Below is an example of the GE ...

javascriptnode.jsfileexpress

JavaScript struggles when dealing with dynamically loaded tables

I am currently working on integrating the javascript widget from addtocalendar.com into my website. The code example provided by them is displayed below. Everything functions as expected when I place it on a regular page. However, I am facing an issue wher ...

javascriptphpjqueryhtmlajax

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

What is the best method for integrating static files (such as css, images, js, etc.) into our Node.js application?

Here is the structure of my project folder: XYZ_PROJECT_FOLDER ASSETS CSS IMAGES JS VENDOR CONTACT.html INDEX.html INDEX.js In the INDEX.js file, I have included code to render all the static files and routing logic: const e ...

javascripthtmlnode.jsexpressbackend

The Angular2 Observable fails to be activated by the async pipe

Take a look at this simple code snippet using angular2/rxjs/typescript public rooms: Observable<Room[]>; constructor ( ... ) { this.rooms = this.inspectShipSubject .do(() => console.log('foo')) .switchMap(shi ...

javascriptangulartypescriptrxjs

Custom positioning of Mui Snackbar in V5

I've been attempting to position a Snackbar in the top right corner with some customization for the top property, but I'm struggling to get it to display correctly. Here's what I've tried: import React from "react"; import { ...

javascriptreactjstypescriptmaterial-ui

Using Vue Js, I utilized Axios to make a call within a function, receiving and storing the retrieved data into an array

While working inside the function shown in the screenshot, I am encountering an issue when trying to access the data retrieved from the backend using axios.get. After exiting the axios block, the values of the array appear as undefined when I attempt to pr ...

javascriptvue.jsvuejs2frontend

Vue: the parent template does not permit the use of v-for directives

Upon creating a simple post list component, I encountered an error when trying to utilize the v-for directive: "eslint-eslint: the template root disallows v-for directives" How can I go about iterating through and displaying each post? To pass data from ...

javascriptloopstemplatesvue.jsvuejs2

Successor in a JavaScript array with multiple dimensions

I am grappling with a complex nested multidimensional array that resembles the following structure in JSON format: [ { "Object": "Car", "Child": [ { "Object": "Toyota", "Child": [ ...

javascriptarraysalgorithmmultidimensional-array

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

As of now, my implementation has been successful in all browsers except for Internet Explorer 11. Despite being able to successfully upload .jpeg, .jpg, and .png images in Google Chrome, I am facing issues when trying to upload them in IE 11. The code wo ...

javascripthtmlarraysangularimage

Tying a progress bar to the data being loaded in Angular JS

I am currently utilizing the bootstrap-ui progressbar along with AngularJS $http for an AJAX request. The task at hand involves syncing the progress bar with the data received by Angular during the request process. To elaborate, if the server is expected ...

angularjsajaxangular-ui-bootstrap

Comparing .innerHTML with createElement() | Exploring setAttribute() versus the Direct method*

Someone mentioned that this approach was not considered "proper", but I didn't pay much attention to it until I encountered a run-time error in IE9. Now, I need help converting the code to utilize object properties instead. What is the reason behind i ...

javascriptinnerhtml