Sending various array data via AngularJS

Welcome to the HTML page view where users can input data and send it to an API.

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

Within the form, three parameters need to be passed in a single array: day, fromtime, and to-time. How can these three parameters be passed in a single array in JSON using AngularJS? My code isn't functioning properly, here is what I have so far. I'd also like to know how to format and send the data in HTML/Angular view side?

This is my attempt at AngularJS code:

$scope.schedule = [];
$scope.schedule[0] = $scope.data1.day;
$scope.schedule[1] = $scope.data1.from_time;
$scope.schedule[2] = $scope.data1.to_time;

var dataParam =  {
    "Schedule": [$scope.data1.schedule]
}
console.log(angular.toJson(dataParam));

Here is the corresponding HTML code:

<tr>
<th scope="col"><input type="checkbox" name="checkbox1" ng-model="data.checkbox1"></th>
<td ng-model="data1.day">Sunday</td>
<td>
<div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
<select id="user_time_zone" ng-disabled="!data.checkbox1" class="form-control form-group" value="Schedule" name="user_time_zone">
... (additional select options)
</select>

</div>
</td>
... (repeated select options for different values)


<td>
<div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
<input type="button" class="btn btn-primary" value="Add Break" id="btn" ng-disabled="!data.checkbox1">
</td>
</tr>

Finally, a java code snippet showcasing the Schedule class:

public class Schedule {
private String Working_day;
private List<String> Working_from;
private List<String> working_to; 

........ }

Answer №1

Substitute

var info = {"Availability":[$scope.info.availability]} with
var info = {"Availability":$scope.availability}

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

Testing AngularJS components with header response verification

After a successful login on my web, the backend sends me an 'x-token'. In my frontend, I validate this token by setting $rootScope.authenticated = true;. If the token is missing from the header response for any reason, my frontend sets $rootScope ...

Having trouble choosing a dropdown value with ng-model; the first item keeps showing up as blank when selected

When I attempt to select a dropdown value inside an AngularJS function by setting the value to the ng-model, the dropdown initially shows a blank value selected. Below is my HTML code: <select class="pulldown" ng-model="test" ng-options="obj as obj.des ...

Summarize the array of objects and find the average value for each distinct object name

I'm facing a challenge with an array structure: const originalArray = [ { name: "a", value: 1 }, { name: "a", value: 2 }, { name: "a", value: 3 }, { name: "b", ...

What steps can be taken to resolve the vulnerability in webpack-pwa-manifest?

Looking for solutions to address the [email protected] and minimist vulnerability. I attempted removing node/modules and package-lock.json, followed by a fresh npm installation, but the issue persists. Any suggestions would be greatly appreciated. Scr ...

ways to dynamically retrieve input values in PHP

Is there a way to dynamically add and remove data fields, as well as increase and decrease fields dynamically in PHP? I am looking to retrieve the subject value in an array or JSON format using PHP only. https://i.stack.imgur.com/HqDCz.png <div data-ro ...

Combine two scope arrays in AngularJS

Is there a way to merge two arrays of scope in AngularJS within my controller so that I can display them in a single table? The merging would be based on a common field present in both arrays, similar to an SQL join operation where data from both tables ...

What is the fate of the code that comes after executing history. push in React?

My go-to for routing is typically the Redirect component. It's straightforward since you just need to return the Redirect component when needed. However, I'm a bit lost when it comes to using history objects. In my code base, after pushing a rout ...

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

My goal is to make 2 HTTP requests where the first call creates a record and then based on its result, I want to decide whether or not to execute the second call that updates another data. However, despite being able to handle errors in the catchError bl ...

Tips for navigating through a webpage by scrolling

My goal is to automatically scroll down to the bottom of the page and then perform a specific action. With the help of uiautomator, I was able to retrieve the following information: index=2, resource-id=com.manoramaonline.arogyam:id/pager,class=android.sup ...

What is the most effective way to create a live preview using AngularJS and CSS?

Is there a way to dynamically change the background color of the body based on the hexadecimal value entered in a textfield, without using jQuery? I want the change to happen live as the user types. The current code works but it doesn't feel right. I ...

What issue lies within this particular for loop?

Hey everyone, I'm having trouble with my code that involves appending an array to the DOM. Here's what I have: function inputFeedContent(data){ for(var k=0; k < columns; k++) { var col = "<div class='col-1'>"; ...

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

Is it possible to execute a standalone .js file using Node.js and Express?

I am working on a Node.js/Express project and I need to test a specific file containing a single function. Currently, I have been calling this function in the index.js file and running all functions within it by using `npm run dev`. However, I would like t ...

Unexpected behavior encountered when using TypeScript type declarations

I am currently working on a Gatsby side project incorporating Typescript for the first time. I initially expected Typescript to behave similarly to PHP type declarations, but I have encountered some unforeseen issues. Despite feeling confident in my Typesc ...

A space designated for numerous receivers

Is there a way to create a field that contains other elements, similar to sending messages to multiple users in a social network? https://i.stack.imgur.com/P9e24.png I attempted to understand the code for this, but it's quite complex. If anyone could ...

What is the reason behind the NextJS logo not being displayed when accessing the page via its URL?

My logo isn't displaying on the /page URL View Screenshot Check out my components/LayoutWrapper.js import Image from 'next/image' import icon from '../assets/images/Icon.svg' <div className="flex items-ce ...

Using jQuery to fetch and read the source code of a specified URL

I'm facing an issue with extracting the source code of a website URL into a variable. Here is my current approach: <script type="text/javascript"> debugger; $(documnet).ready(function () { var timer = $.ajax({ type: ...

Custom mute bot using Discord.js with the ability to specify duration and provide a reason

I'm creating a discord.js mute bot and encountering some issues with its functionality. Is there a way to program it so that when someone types the command !mute User, it automatically sets the time to 30min and the reason as No reason Specified. How ...

Execute a Node.JS query using an HTML select dropdown

My goal is to customize queries to a mySQL database based on the user's selection from select options on my website. Here is the HTML code: <select id = "year"> <option value = "yr" selected>Choose a Year</option> <option id = " ...

What is the best way to conceal the button?

I'm working on a program that involves flipping cards and creating new ones using three components: App, CardEditor, and CardViewer. Within the CardEditor component, I am trying to implement a function that hides the button leading to CardViewer until ...