Sending a group of checkboxes via Ajax using AngularJS

I am facing a challenge with making an ajax GET request where I need to submit an array of checkboxes, all with the same name. The checkboxes are defined as follows:

type[] = new

type[] = used

type[] = refurbished

The purpose of this is to fulfill the requirements of an API I am trying to access. However, I am unsure of how to accomplish this task.

Everything else is functioning properly with the API except for these checkboxes.

The checkboxes are set up in the code snippet below:

 self.types = ['new', 'used', 'refurbished'];
 //....
           <label ng-repeat="type in search.types">
                <input
                        type="checkbox"
                        name="type[]"
                        value="{{type}}"
                        > {{type}}
            </label>

Values for the API request are added as shown in the example below:

 dataObj['price'] = $scope.formData.max_price;
//similar approach needed for the type[] checkboxes

These values are then sent to the API:

  return $http({
                url: APIUrl + "search/",
                method: "GET",
                params: dataObj
  });
  //etc

The parameters to be posted to the API need to follow this format:

 price = 400000
 type[] = new
 type[] = refurbished
 //Note: "used" was omitted as the corresponding checkbox was not checked

It is important to emphasize that this format is not flexible and is a requirement of the API.

Thank you!

Answer №1

apply the directives ng-model="checkbox1", ng-model="checkbox2", ng-model="checkbox3" to capture their values and store them in an object.

result = { price: price, category1: checkbox1, category2: checkbox2, category3: checkbox3 }

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

Unveiling the mystery of extracting information from a string post serialization

When working with a form, I am using this jQuery code to fetch all the field values: var adtitletoshow = $("#form_data").serialize(); After alerting adtitletoshow, it displays something like this - &fomdata1=textone&fomdata2=texttwo&fomdat ...

The 'fn' argument passed is not a valid function, instead it is a string

I am encountering an issue while trying to retrieve data from my server. The console doesn't provide any specific information about the error. My objective is to fetch JSON data from the server and use it to display the required information. I am util ...

Despite the presence of a producer and topic, sending Kafka messages is proving to be a challenge

Currently, I am using TypeScript and the KafkaJS library on my local machine with a single Kafka broker. After successfully connecting a producer, confirming the creation of my topic, and creating messages like so: const changeMessage = { key: id, ...

What is the correct way to accurately determine the width of a block being displayed with the flex-direction:column property?

For instance: HTML console.log($('.container').width()); // 600px as we defined in css. console.log($('.list').width()); // 600px console.log($('.box').eq('-1').position().left + $('.box').outerWidth( ...

The Node.js azure-storage TableService does not offer any functionalities or operations

Having trouble connecting to my Azure storage account due to issues with the azure-storage module. Specifically, after creating a TableService object, I am only able to access the filter method on it. When attempting to use methods like queryTables and cre ...

Can you explain how to retrieve the header value from ng-table?

Is there a way to retrieve the table header for each column from JavaScript? When I call tableTest, it only returns data of each row, not the header names like 'name' and 'description'. Is there a method like tableTest.data-title to acc ...

Can Angular components be used to replace a segment of a string?

Looking to integrate a tag system in Angular similar to Instagram or Twitter. Unsure of the correct approach for this task. Consider a string like: Hello #xyz how are you doing?. I aim to replace #xyz with <tag-component [input]="xyz">&l ...

having difficulty compiling nw.js with diskdb

Currently, I am in the process of creating a sample desktop application with the help of node webkit and angular js by following a tutorial series found here. For data storage, I have utilized diskdb and established connection as shown below: var db = req ...

What are the steps to redirect from a nested route back to the top route using Node.js with Express?

Is there a way to redirect from a nested route to a top route in Express.js? In the following code snippet, how can we make the callback for the route /toproute/nested redirect to /profile instead of /toproute/profile? // app.js const express = require(& ...

How can I use regular expressions to locate a React JSX element that contains a specific attribute?

Currently conducting an audit within a vast codebase, my task involves searching for all instances of a component where it is utilized with a specific prop. I believe that using regex could prove beneficial in this situation; however, the challenge lies in ...

Error message: Unable to access $controller with AngularJS and Karma

As someone who is just starting with testing, I figured it was a good idea to begin testing this project. However, when I execute grunt karma:watch, I encounter an error related to the configuration files. My config file includes: module.exports = functi ...

Tips on altering the location path when redirecting to a different page using window.location?

Is it a silly question to ask? I tried looking for the answer on Google but couldn't find it. I'm currently working on a website where users can upload photos or videos, using HTML, CSS, and JavaScript. On the homepage, when a user clicks on a ...

Is there a way for me to automatically update the contents of div x using Ajax whenever the contents of div y are changed with another Ajax call?

I've been struggling with this issue for quite some time now and haven't been able to find a solution. The situation is as follows: I have two divs, where div3 needs to update its content whenever div2 changes. Div2 is updated using ajax, so whe ...

What is the best way to send a parameter to a component in Vue.js without including it in the URL during routing?

One of my Vue.js components is a SideBar that retrieves JSON data. The JSON data consists of names that correspond to specific URLs which in turn contain more JSON data. { "applicants": "url1", "applications": "url2" ...

An elaborate warning mechanism in Redux-observable that does not trigger an action at the conclusion of an epic

I'm currently working on implementing a sophisticated alert system using redux and redux-observable. The requirements are: An action should request an alert: REQUEST_ALERT An action should create an alert and add an ID: SET_ALERT (handled in the ep ...

What could be causing my array to be misconverted into JSONP data?

let defaultPosts = new Array([]); defaultPosts[0] = "first post"; defaultPosts[1] = "second post"; defaultPosts[2] = "third post"; The array in the console is showing ["first post", "second post", "third post"]; let jsonString = JSON.stringi ...

A guide to correctly importing a Json File into Three.js

I've been working on some cool projects in Blender and wanted to showcase one using threejs. However, I'm facing an issue where the object isn't displaying properly. Can someone guide me on how to correctly load a JSON file with keyframe ani ...

When utilizing jQuery in HTML, the Marquee will bounce back upon reaching the end

My issue is that when I use a regular marquee, the text simply goes to the end and does not bounce back to the start as soon as it reaches the end of the div. Instead of using a normal marquee, I am looking to achieve this desired effect by utilizing jQue ...

Retrieve identical values from an array and display them using Vue.js

I am working with a product array that includes id, name, and category data for 5 products. For example, let's say there are 3 products assigned to the mobile category and 2 products assigned to the computer category. What is the best approach to rend ...

Implementing AJAX for PHP authentication

My goal is to enable login functionality using AJAX to call a PHP file. The ajax and php code seems correct as it doesn't show any errors when I check the console.log(data). However, the issue arises when the php redirect("my-account.php") fails to ex ...