What is the best way to send table data in an HttpPost request using angularjs and JSON?

I'm struggling to figure out how to handle table data with multiple rows. I'm working on registering an employer in the system, where they need to input qualification details through a modal. These details are then saved in an HTML table for viewing. Eventually, all the information entered, including what's in the table, needs to be passed through an Angular controller via a service to the database. Here is my `controller.js`:

This function sends the data:


$scope.register = function (isValid) {
    console.log($scope.records);
    
    if (isValid) {
        var regidetail = {
            fname: $scope.registDetails.fname,
            lname: $scope.registDetails.lname,
            // More fields here...
        };
        
        console.log(regidetail);
        UserService.Register(regidetail, function (res) {
            EMPID = (res.data);
            console.log(res.data);
        });
    }
}

Here is the corresponding HTML:


<div class="form-group">
    <label class="col-lg-2 col-md-3 control-label" for="">Qualifications</label>
    <div class="col-lg-10 col-md-9 ">
        <table id="basic-datatables" name="datatables" class="table table-striped table-bordered table-hover" cellspacing="0" width="100">
            <thead>
                <tr>
                    <th>Qualification Type</th>
                    <!-- More table headers... -->
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="(recordIndex, record) in records" style="text-align:center">
                    <td ng-model="registDetails.qualification_type">{{record.qualification_type}}</td>
                    <!-- More table body elements... -->
                </tr>
            </tbody>
        </table>
    </div>
    
    <!-- Modal... -->
</div>

If anyone can provide any assistance, it would be greatly appreciated! :)

Answer №1

Let's Begin!

let regidetail = angular.toJson({

<!-- include all the necessary details here -->

};

Next Step is to

$http({
     method : "POST",
     url    : "your API server URL",
     data   : regidetail,
     }).then(function (response){
         //successful response
         alert("Success!");
      }, function (response){
         // error response
         alert("Please check your input");
});

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

I'm having trouble executing the straightforward code I discovered on GitHub

https://github.com/Valish/sherdog-api Upon downloading the sherdog-api, I embarked on installing node.js as a prerequisite for using this new tool, despite having no prior experience with such software. Following that, I opened up the command prompt and n ...

Creating a dynamic sliding feature in Three.js: A step-by-step guide

Recently, I came across three.js and fell in love with it. I managed to create a rotating car animation controlled by keyboard arrows, but now I'm facing a challenge in creating a sliding animation (similar to -> -> ->) instead of a rotation ...

Introduce a timeout in the ajax request

I'm currently facing an issue with adding a 2-second delay between the loader icon and the success message displaying the data as html. I attempted to use setTimeout in my ajax code with a specified delay number, but it doesn't seem to be workin ...

Check your jQuery regex to see if a variable starts with another

Is it possible to check if a variable starts with another one? For example, checking if Var1 starts with Var2 let regex = '^'+var1+'i'; if(regex.match(var2)){ return true } This code snippet always fails to return true. Thank you in ...

Tips for ensuring text remains within a div container and wraps to the next line when reaching the edge

Currently, I am working on a flash card application using Angular. Users can input text in a text box, and the text will be displayed on a flash card below it. However, I have encountered an issue where if the user types a lot of text, it overflows and mov ...

Utilizing an npm Package in Laravel - Dealing with ReferenceError

I'm having trouble with the installation and usage of a JS package through npm. The package can be found at . First, I executed the npm command: npm install --save zenorocha/clipboardjs Next, I added the following line to my app.js file: require(& ...

The Angular Element's emitted number transforms into a string once it reaches the JavaScript event listener

Within my Angular Elements web component, I have defined and emitted events in the following way: @Input() groupId: number = -1; @Output('group_change') groupChange!: EventEmitter<number>; ... this.groupChange.emit(groupId); I integrated ...

Managing pop-up modals through cookies

Trying to manage pop-up modal behavior using cookies. The desired functionality: Modal appears 3 seconds after page load. If user closes modal, a cookie is created with a 2-day expiry (for testing purposes set at 30 seconds). When cookie expires or doesn ...

Guide for formatting a decimal number retrieved from a json object in PHP

I need help formatting a decimal number retrieved from a JSON object in PHP. I want to ensure the number is displayed with only two digits after the decimal point. Below is the code snippet: $url = "https://api.yadio.io/exrates/EUR"; $data = json_decode(f ...

Looking to update the location of an element within a canvas using Vue and socket.io?

I am currently developing a 2D pong game using vue.js and socket.io. At the moment, I have a black rectangle displayed in a canvas. My goal is to make this rectangle move following the cursor of my mouse. The issue I am facing is that although my console l ...

What could be causing the issue with npm install packages not functioning properly?

Currently, I am in the process of setting up and deploying a particular git repository locally: https://github.com/maxie112/gatsby-ecommerce-theme I am strictly adhering to the instructions provided for Mac OS. Here are the encountered error logs; maxden ...

The power of Geolocation API coupled with the efficiency of AJAX requests

I'm currently working on a personal project that involves utilizing the W3C Geolocation API to fetch the user's location and then displaying the weather forecast for that specific location using the Wunderground API through an AJAX request. Here ...

Determining the Correct Django JSON File for Referencing the "Model"

I'm struggling to populate my model with the fields from the JSON input. I'm unsure which file the "model" should be referencing. I assume it should point to where the model is located, but I keep encountering an error when trying to load the fi ...

Conceal image description while hovering and reveal overlay text

Navigating image captions: I'm looking to hide the title caption on hover and display overlay text instead. However, when hovering over the image, both the title and overlay text disappear. Where am I going wrong with this? If anyone could provide in ...

"Subtle Website Background Fade Effect When Menu is Hovered Over

Click on the following link to observe a transition effect that occurs on the body of the website when interacting with the main menu system: Here is the website Do you know what this effect is called and how it can be integrated into a website? ...

Using a Handlebars function in JavaScript to appropriately format currency

In my handlebar template, I have the following code snippet: <span class="currencyFormatMe">{{_current_price}}</span> Here is an example of the output from the loop: Bid: $24000 I'm trying to format this output with commas and encounte ...

What makes the JSON content property stand out when it comes to converting it into XML?

When utilizing the transformation functions provided by the org.json library to convert json to xml, the process is usually straightforward. For instance, the following code snippet achieves this easily. String xmlStr = XML.toString(new JSONObject(jsonStr ...

Converting the structure of an object into an array structure for highcharts can be achieved through

I am looking to transform the object structure below: [ { "tahun": "2010", "apel": 100, "pisang": 200, "anggur": 300, "nanas": 400, "melon": 500 }, { ...

Tips for showing only the date (excluding time) from a get operation in javascript (specifically using node js and mysql)

I recently built a CRUD application using Node.js and MySQL. However, I am facing an issue where I am unable to display the date without the time and in the correct format. { "id": 1, "name": "Rick Sanchez", "dob": & ...

Is it possible to utilize the "initialData" attribute to input App Script parameters into a Stackdriver message?

Summary It has come to light that utilizing App Script parameters, along with other data, in Stackdriver using a JSON object with an "initialData" property might not be functioning as expected despite Google's recommendation. Issue Example If you r ...