AngularJS: The power of dynamic HTTP POST parameter names

Utilizing an API to update profile information allows for the addition of a nickname, email, phone number, or password in the request parameters, which will then be updated in the database.

When updating a specific field, such as Nickname:

{
 "nickname": "alifa",
 "device_id": "chrome",
 "device_model": "browser",
 "device_os": "angularJS"
}

Or when updating email:

{
 "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f767179705f7a677e726f737a317c_7072">[email protected]</a>",
 "device_id": "chrome",
 "device_model": "browser",
 "device_os": "angularJS"
}

To streamline this process, a function can be used to pass the property name and value, allowing for the creation of an object and sending an HTTP POST request:

this.updateDetails = function(dataName, dataValue){
  Loader.global.show();
  var data = $.param({
    device_id: app.device_id,
    device_os: app.device_os,
    device_model: app.device_model
  });
  data[dataName] = dataValue;
  console.log(data);
  return $http.post(app.baseUrl + 'profile/' , data).success(function(){
    Loader.global.hide();
  }).error(function(){
    Loader.global.hide();
  })
}

However, the server is receiving only:

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

Is there a more efficient way to accomplish this task?

Answer №1

In order to properly update the object being passed to param, you must directly modify the object itself and not just add a property to the resulting string from param.

var info = {
  user_id: currentUser.id,
  user_name: currentUser.name,
  user_email: currentUser.email
};
info[infoType] = infoValue;
var updated_info = $.param(info);

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

Having trouble getting Emberjs to properly handle an Ajax POST request

Currently, my goal is to send data to the database using Ajax POST. To start off, I have an HTML form as follows: <script type="text/x-handlebars" id="project"> <div class="row"> <div class="span6"> <form class ...

transferring information between two html pages using javascript

Although this question has been raised multiple times, I have gone through the answers and attempted various solutions, however, my code is still not functioning correctly. Below are my working files : my_app -index.html -task1 -index.html I ...

What is the best way to prevent two paths within an SVG from intersecting with each other?

Currently, I am developing a program that allows the user to draw lines. Once the user completes drawing a line, I receive an array of points in this format: [[x, y], [x, y], ...]. I then convert these points into a path string using the following functio ...

Placeholder fails to appear

After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...

What is the best way to locate and list all video links, and include options for "Play Video" and "Download Video"?

I have a project where I am using PHP to crawl and generate video links from the web. Now, I am looking to implement an option for users to either "Play Video" or "Download Video" when a video link is detected, along with adding a video player if the user ...

Uploading files in the mean stack environment

I recently started working with MEAN stack and I'm struggling to upload a file in my project. Despite extensive research, I haven't been able to find a suitable method for uploading files. My project is based on the Yeoman generator crud (). Can ...

Adjust the background color of a specific list item when hovering over another list item

My dilemma lies in my inadequate knowledge to solve this issue: I have a dropdown menu embedded within a website. (View screenshot here: [SCREENSHOT]) The desired outcome is for the background color of an icon on the main list to change when I navigate to ...

Utilize AngularJS directives within an Angular component for enhanced functionality

I'm currently in the process of enhancing an angularjs directive to integrate it into my angular component. I have successfully set up the hybrid (ng1 + ng2) environment and have also managed to inject angularjs services into Angular and utilize them ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

In React + TypeScript, learn how to effectively pass down a function from a container component to a

I am currently working on developing a tabs application using React and Typescript. The main component, Tabs, manages the state and passes it down to the Content component. Additionally, I have implemented a function called 'handleName' which is ...

Troubleshoot the pattern of Pascal's Triangle

Can someone help me understand what's wrong with my implementation of Pascal's Triangle in JavaScript? I came across a similar thread discussing recursion, but I'm having trouble figuring out the errors in my code. I would appreciate fresh e ...

Is it possible to use wildcards in Socket.io rooms or namespaces?

The hierarchy I am working with is as follows: Store -> Manager -> Assistant In this setup, a Manager has access to everything that the Assistant sends, while the Assistant can only access what the Manager explicitly provides. My understanding is t ...

I am encountering a problem with the image source in my Next.js project

I've encountered an issue with using Sanity image URLs in my project. The error message displayed in my console page reads: next-dev.js?3515:25 Warning: Prop src did not match. Server:"https://cdn.sanity.io/images/jbcyg7kh/production/4f6d8f5ae1b ...

Mastering the Art of Promises in RXJS Observables

After thoroughly researching SO, I stumbled upon numerous questions and answers similar to mine. However, I suspect that there might be gaps in my fundamental understanding of how to effectively work with this technology stack. Currently, I am deeply enga ...

What is the best way to change a Buffer array into hexadecimal format?

After making a call to one of my API endpoints, I am receiving a Buffer array in a JSON object. My goal is to convert this array into a more user-friendly format such as hex so that I can easily compare them. Below is a snippet of the current object struct ...

Something went wrong with @wdio/runner: unable to establish session

After successfully developing cucumber tests that passed and tested some URLs with Chrome, I encountered errors when uploading to the pipeline despite the tests succeeding. Webdriver generated the following errors: INFO webdriver: DATA { 57[0-0] capabili ...

Troubleshooting Issue: Data Not Being Transferred from AngularJS HTTP Post Request to ASP.NET Core 8 MVC

I'm currently working on a project using ASP.NET Core 8 MVC and encountering an issue where the name parameter in my controller is not properly receiving the value sent from an AngularJS client. Here are the relevant snippets of my code: Here's ...

I'm feeling a bit lost on how to bring my random quote generator to life

I'm attempting to add animation to my random quote generator by making it look like another card is being flipped on top of the existing one, similar to a deck of cards. With limited coding knowledge, I followed a tutorial and made some adjustments to ...

Passing Variables from Node JS to Pug Template's HTML and JavaScript Sections

Here is a route that sends various variables to a Pug template: items.js route router.get('/edit/:itemObjectId', async function(req, res, next) { var itemObjectId = req.params.itemObjectId; var equipmentCategoryArr = []; var lifeExp ...

Using PHP script, extract information from a JSON file and populate a dropdown menu in HTML

I am attempting to extract data from a JSON file using PHP and then display this data in an HTML select tag on the front end. Below is my PHP file: <?php ini_set('display-errors', 'on'); error_reporting(E_ALL); $executionStartTim ...