Retrieving selected checkboxes from a table with multiple rows and columns and sending them as a post response

I have a table in my account statement with dates and two columns containing checkboxes.

View (HTML)

<table>
  <tr>
    <th>Statement Period</th>
    <th>Mail Address</th>
    <th>Email Address</th>
  </tr>
  <tr>
    <td>Oct 2018</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Nov 2018</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Dec 2018</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
</table>
<button ng-click="getSelectedData">Proceed</button<

Using the $index (array ID), I need to extract the selected checkboxes from each row and compile them into an array in JSON format;

Note: "Y" represents a selected checkbox, while "N" represents an unselected checkbox

JSON Array (Expected Response)

[
  {
    "isEmail": "Y",
    "isMail": "N",
    "month": "12",
    "year": "2018"
  },
  {
    "isEmail": "Y",
    "isMail": "N",
    "month": "10",
    "year": "2018"
  }
]

I am struggling to achieve this using a POST request with parameters for email address and physical address. I've attempted a loop but without success.

Controller JS

$scope.sendStatementList = function(i) {
  var listLength = $scope.accountStatementList.length;

  for (var i = 0; i < listLength; i++) {
    var selectedItem = $scope.accountStatementList[i];

    return selectedItem;
  }

  console.log(selectedItem);
};

I have tried various methods but still haven't found the right solution. Any assistance would be greatly appreciated.

P.S. Here is a plunker (demo) showcasing my issue.

Answer №1

Give this a try:

 https://next.plnkr.co/edit/6GLQtI85vPE0V98x

Simply create an additional array that is mapped to your current one:

 $scope.finalResponse = $scope.statementListRespone.map(function(st){
    return { 
      "month" : $filter('date')(st, "MM") , 
      "year" : $filter('date')(st, "yyyy"), 
      "isMail": "N", 
      "isEmail": "N"};
  });

Then update your code to bind to the new array, like so:

<input type="checkbox" id="email-{{$index}}" name="email" ng-modal="email" 
    ng-model="finalResponse[$index]['isEmail']" 
    ng-true-value="'Y'" ng-false-value="'N'"> 

Now, when you click the button, you can easily send your finalResponse array.

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

Utilizing meteor to display information from a deeply nested collection

I've been struggling to extract data from a nested collection without success, as the dot notation in the HTML is not yielding any results. Essentially, my goal is to only retrieve the necessary data from a nested collection. I am working on implemen ...

Issue with Angular ngFor within a particular dialog window?

(respPIN and internalNotes are both of type InternalNotes[]) When the code in encounter.component.ts is set like this: this.ps.GetInternalNotes(resp.PersonID.toString()).subscribe(respPIN => { this.internalNotes = respPIN; }); An ERROR occurs: Err ...

Tips for storing an ARRAY within a Wordpress Custom Field

My $location array is unexpectedly empty. It's puzzling because the list ($address, $lat, $long) successfully creates variables $lat and $long. I am certain of this as they are being input into the update_post_meta fields. However, for some reason, th ...

Having trouble with the side menu navigation in Bootstrap?

I have a total of 5 pages on my website. Out of these, 2 main pages contain submenus/pages as well. To make users aware of the presence of submenus, I am using plus and minus icons. However, there is an issue where clicking on one submenu toggle icon doe ...

Encoding a JavaScript object literal with URL encoding

My question involves a Model public class SomeModel { public string SomeText { get; set; } } When working with JavaScript, I create a JavaScript object literal of the model: var model = { SomeText: "test" }; var serializ ...

Enhance the efficiency of AngularJS search filtering

With nearly 2000 rows on this page, I am using AngularJS filter to search for items containing the typed strings. However, I have noticed that the efficiency is poor when typing just one character into the input control. Does anyone have suggestions for im ...

Utilizing a Clear Button to Reset Specific Fields in a Form Without Clearing the Entire Form

I am currently working on a multipart form that includes 'Name', 'Email', and 'Phone Number' fields. It's important to note that the phone number field is actually composed of 10 individual single-digit fields. To enhan ...

"Enhance user experience with AJAX for selecting multiple checkboxes or performing mult

Hey there! So, I've got a question about handling multiple checkboxes with the same name in a form. Here's an example of what I'm working with: <input type="checkbox" name="myname[]" value="1" /> <input type="checkbox" name="myname ...

Is there a way to iterate over an array in Javascript, append a word to each element, and finally get back the modified array but without using the

Is there an alternative way to iterate through an array in Javascript, append a word, and then produce a new array (without utilizing map)? var addBabyPrefix = (array) => { for (var i =0; i < array.length; i++) { console.log('baby '+ ...

There seems to be an issue with Next.js retrieving an image from an external localhost

I'm facing a challenge in my current Next.js 14 project where I am encountering an issue when attempting to display an image from localhost:8081 using the Image component from 'next/image'. The backend is written in Java and it sends the ima ...

Exploring ways to retrieve values for corresponding keys from JSON using Java and Jackson parser

When handling the Json data, I am currently only extracting the values of the first array using the code provided below. [ { "type": "Brand", "matchedProducts": [], "matchedIds": [ "adidas", ...

Using form.submit() alongside preventDefault() will not yield the desired outcome

My login form needs to either close the lightbox or update the error box based on the success of the login attempt. I suspect the issue lies with the onclick="formhash(this.form, this.form.password);" which is a JavaScript function that hashes a passwor ...

Cannot instantiate Marker Clusterer as a constructor

I am facing an issue with implementing Marker Clusterer in my app. I have successfully installed '@google/markerclusterer' in my project and imported it as shown below. However, a puzzling error keeps popping up: core.js:4002 ERROR TypeError: _go ...

Received an unexpected GET request while attempting to modify an HTML attribute

After clicking a button in my HTML file, a function is called from a separate file. Here is the code for that function: function getRandomVideoLink(){ //AJAX request to /random-video console.log("ajax request"); var xhttp = new XMLHttpRequest( ...

The JSON output seems to be missing from the logcat display

Currently, I am undertaking an online course to learn Android Studio, and I have encountered a problem. The issue arises while developing a weather application utilizing James Smith's Android Asynchronous Http Client dependency. Despite implementing v ...

php$insert new field into mysql table using form insertcell

How do I insert a column in MySQL? I am struggling with the insertCell form. I have tried but I can't seem to add a MySQL column using my JavaScript code with PHP. I am familiar with Php PDO, but this seems difficult to me. Can someone guide me on ho ...

Transmitting HTTP headers using Node.js

Within my Node JS Express application, I have an API endpoint called 'download' that returns a buffer to the calling application along with a header named 'status', which is a Javascript object. The response from Node sends the buffer ...

Obtaining Data from an XML Node Using AJAX

Trying to extract statistics from my XML based on a specific name request, but encountering issues with my JavaScript functionality. XML data: <player> <forward><name>Joe</name><stats>45</stats></forward> <f ...

How can you replace a public method in a specific class in Javascript?

I have a JavaScript class that I need to test: TestClass = function { // some code that utilizes initializeRequest this.initializeRequest = function() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); ...

What could be causing my PDO query to not run when using fetch()?

I am attempting to execute an update statement using a button onclick event, but I am encountering difficulties when trying to run it with the fetch api. Here is the JavaScript function I have: const changeProductAvailability = (id,status) => { const ...