The request payload appears as [Object Object] when initiating the AJAX post request

Currently, I am making an AJAX request with the specified data. The data being sent is an object and my intention is to send the object itself without converting it to a JSON string. However, when viewing the request in the browser, the payload is shown as [object object], despite me sending a proper JavaScript object.

let emailIdForAPICall = { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f7f4f5d6f1fbf7fffab8f5f9fb">[email protected]</a>"};

$.ajax({
          type: 'POST',
           url: gigyaServlet,
           data: {    
             'profile': emailIdForAPICall,
           }
    })

Upon triggering the aforementioned API call, the payload appears as depicted below - https://i.sstatic.net/UGo2p.png

I attempted using JSON.parse(JSON.stringify(emailIdForAPICall)) but unfortunately, it did not resolve the issue.

It's concerning that a similar request works correctly on a different site.

javascriptjsonajaxobjectpost

Answer №1

const requestEmailId = {
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdaecfacd7e8fdefedaffdc4c9">[email protected]</a>"
};

$.ajax({
    method: 'POST',
    url: gigyaApiEndpoint,
    data: JSON.stringify({
        'userProfile': requestEmailId,
    }),
    contentType: 'application/json',
})

Answer №2

Hey Ramya Shivu, your request is related to retrieving data from either a JSON format or a plain data format. If it's JSON, make sure to include contentType: 'application/json' in the header. If it's form data, follow a different approach.

let emailIdForAPICall = { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2838081a2858f838b8ecc818d8f">[email protected]</a>"};

 $.ajax({
              type: 'POST',
               url: gigyaServlet,
               data: JSON.stringify({  //stringify your obj
            'profile': emailIdForAPICall,
        })
        })

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

Learn how to manage Ajax GET/POST requests using nodejs, expressjs, and Jade Template Engine

I am currently working on a project that involves the use of NODE, EXPRESS, and JADE TEMPLATE ENGINE, as well as AJAX to optimize page loading. However, I encountered an issue when trying to utilize the data received from a GET request in AJAX directly wit ...

node.jsajaxexpresspug

I am unable to get the radio button checked in Angular 2

I have set up a form with two radio buttons for gender selection, and I want to ensure that the previously selected option is displayed as checked. Here's the code snippet I've added in my template: <div class="form-group"> <label& ...

javascriptjqueryangular

Positioning broadcasted videos on a web page using the OpenTok API

Currently, I am utilizing opentok to connect to the broadcast service and obtaining the flash player object at the bottom of my page. I am seeking guidance on how to position it within a specific div container. The following code snippet demonstrates how ...

javascriptjquery.netajaxopentok

How to retrieve an array from a JSON object with JavaScript

After receiving an object from the server, I am specifically looking to extract the array ITEMS. How can I achieve this? I attempted using array['items'] but it did not yield the expected result and returned undefined { "items": [ { ...

javascriptjson

Categorize a collection of objects based on shared characteristics

I am in need of the count for the current week only. Specifically, I want to calculate monthly totals with a breakdown per week. Currently, I can retrieve the weekly count for each month. Now, my goal is to display only the existing weeks. For example, if ...

javascriptjson

I need the language chosen using Lingui's Language Switcher (i18n) to persist throughout the app, even after a refresh

I have been experimenting with Lingui for internationalization (i18n) in my app. I followed the documentation and tutorial to create a language switcher, but I am unsure how to set it up so that the selected language persists throughout the app even after ...

javascriptreactjsinternationalizationlinguijs

Navigating to a particular div using a click event

I am trying to achieve a scrolling effect on my webpage by clicking a button that will target a specific div with the class "second". Currently, I have implemented this functionality using jQuery but I am curious about how to accomplish the same task using ...

javascriptjqueryhtmlcssscroll

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

javascriptjqueryhtmliframe

A guide to efficiently reusing parameter definitions in functions using JSDoc

Currently, I have HTTP handlers set up in my express application. I want to use JSDoc annotations to document these handlers in a reusable manner. Here is what I currently have: /** * * @param {functions.Request} req * @param {functions.Response} res ...

javascriptnode.jsexpressjsdoc

transform nested object into a flat object using JavaScript

here is the given JSON format: - { "_id": "5c1c4b2defb4ab11f801f30d", "name": "Ray15", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afddced69e9aefc8c2cec6c381ccc0c2">[email protected]</a>" ...

javascriptnode.js

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Seeking help to create a div resizer using only pure JavaScript as jQuery is restricted. The current functionality works, but breaks when the position of the slider-div is not set to absolute. Any solutions to fix this issue would be greatly appreciated. ...

javascripthtmlcss

Having trouble toggling webcam video in React/NextJS using useRef?

I have created a Webcam component to be used in multiple areas of my codebase, but it only displays on load. I am trying to implement a toggle feature to turn it on and off, however, I am facing difficulties making it work. Below is the TypeScript impleme ...

javascriptreactjsnext.jswebcamreact-ref

Tips for retrieving a specific element from a JSON file

My current challenge involves retrieving a JSON file from an API and extracting data from the 'place_id' object. I have been researching online on how to extract elements from JSON files, but I seem to be encountering an error in my code: Warning ...

phpjson

Unable to submit CSV file for Controller Action

I am encountering an issue with uploading a csv file to my backend action method. I have an action method called UploadPropertyCSV in Controller PropertyController that is supposed to process the file and add it to the database. However, when I click submi ...

javascriptjqueryjsonasp.net-mvccsv

Is locking Node and npm versions necessary for frontend framework projects?

Currently working on frontend projects in React and Vue, I am using specific versions of node and npm. However, with other developers contributing to the repository, how can we ensure that they also use the same versions to create consistent js bundles? ...

javascriptnode.jsnpm

The ability to retrieve variables within a certain scope from a function that is declared externally

Is there a method to access and print the value of a closure variable, temp, from a function defined outside the closure but referenced within it without passing temp as an argument to the function? var funcA, funcB; funcA = function () { console.log( ...

javascript

Automatically identifying cloud functions ready for deployment with the gcloud command line interface

When utilizing Firebase tools, the deployment process is streamlined with auto-detection of available functions by issuing the command: firebase deploy --only functions However, for more extensive control over environment variables and VPC connectors, we ...

javascriptnode.jsfirebasegoogle-cloud-functions

React: The peculiar contradiction of useEffect with eventHandler props

Having trouble with this specific example. The issue arises with an Input component that includes an onChange prop to manage internal data changes. Under normal circumstances, if the value is updated externally, the onChange prop does not trigger since t ...

javascriptreactjsreact-hooksuse-effect

I am currently utilizing Ajax to trigger the forgot password button, which then sends an email to a specific email address through CodeIgniter

When using ajax to click the forget button and send an email to a particular email address, I am getting an error "Fail". Can anyone help me figure out what the problem might be? Below you can see the form and controller code: Form <div class="field-w ...

htmlajaxcodeigniter

Update the JSON data following deletion

I have received the following JSON data: "memberValidations": [ { "field": "PRIMARY_EMAIL", "errorCode": "com.endeavour.data.validation.PRIMARY_EMAIL", "createdDateTime": null }, ...

javascriptjson