Having trouble sending an array's JSON data to a web service using Angular

I am working with a table where each cell in the rows contains form fields. The table also has two buttons: one button adds a new row to the table, and the other sends all the rows.

Below is the code snippet for adding new blank rows:

$scope.attributes = [];

$scope.addRow = function(){
     var newRow = {attributeName: "", type: "", size: "", priority: "", mandatory: "", notes: ""};
$scope.attributes.push(newRow);
                        }

View :

    <table class="table">
            <tr>
               <td>Attribute Name</td>
                <td>Type</td>
                <td>Size</td>
                <td>Priority</td>
                <td>Mandatory</td>
                <td>Notes</td>
              </tr>
              <tr ng-repeat="attribute in attributes">
                 <td><input type="text" ng-model="attribute.attributeName" /> </td>
                 <td>
                   <select ng-options="option as option.value for option in options" ng-model="attribute.type"></select>
                 </td>
                 <td><input type="number" ng-model="attribute.size" /></td>  
                 <td>
                     <select ng-options="option as option.value for option in options" ng-model="attribute.type"></select>
                  </td>
                  <td><input type="checkbox" ng-model="attribute.mandatory" ng-true-value="'YES'" ng-false-value="'NO'"></td>
                  <td><input type="text" ng-model="attribute.notes" /> </td>
                </tr>
   </table>

Angular Code for sending data to web Service :-

$scope.sendAttribute = function(){
 $http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", $scope.attributes).success(function(data){
                        $scope.status = data;
                    })
                }

Json Array Sending:-

 [{"attributeName":"j",
 "type":{"id_combo_value":"3","value":"Date"},
  "size":11,"priority":"",
  "mandatory":"YES",
  "notes":"example"}]

Is everything correct or is the issue with the web service? Your feedback would be greatly appreciated as this is my first attempt using Angular. Thank you.

Answer №1

It seems that your web service is requesting one element at a time from the data array.

To meet this requirement, you should update the sendRow function to include the row index you wish to send, like this:

$scope.sendRow = function(selectedRow){
    $http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", selectedRow).success(function(response){
        $scope.status = response;
    })
}

With this modification, you can either send all rows in a loop by:

angular.forEach($scope.atributs, $scope.sendRow);

or select and send a single row using a specific index:

$scope.sendRow($scope.atributs[0])

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 have been working on incorporating a menu item in React, but I keep encountering an error

I am using the MenuItem component to create a dropdown menu in my React project. Despite importing the necessary package, I am encountering an error when running the server. I have searched for solutions but haven't found a definitive me ...

passing JSON data using JavaScript or jQuery

I have a JSON snippet that I need to parse using JavaScript or jQuery and convert into variables: name and meetup. Can you help me with this? Below is the JSON code: { "MYID": 1, "module": [ { "name": "Manchester", ...

What was the reasoning behind Mozilla's decision to implement a conditional catch clause?

Discover the unique Conditional Catch Clauses from Mozilla Delve into this question out of pure curiosity - why would Mozilla venture beyond standard structures with this innovative feature? What specific challenges or issues is it designed to address? W ...

Halt the script if the file has not been successfully loaded

Looking for a way to halt the script until $.get() has completed executing in this code snippet. $.get("assets/data/html/navigation.html", function(response) { $('body').append(response); }); $('body').append('<div class="m ...

What improvements can be made to optimize this SQL query and eliminate the need for an additional AND statement at the end

I am working on dynamically constructing a SQL query, such as: "SELECT * FROM TABLE WHERE A = B AND C = D AND E = F" Is there a more efficient way to construct this SQL query without adding an extra AND at the end? Here is my current code snippet: le ...

Utilizing Packery.js in AngularJS

Having some trouble trying to integrate Packery.js with my angularjs app. It seems like they are not working well together. I tried setting isInitLayout to false, but no luck. This is the (bootstrap 3) HTML code I am using: <div class="row" class="js ...

The execution of ajax within a script being called by another ajax request is not functioning as expected in PHP

I am currently working on a project that involves three files, each serving a specific purpose as outlined below: //File1.php $('button.button1').click(function(e){ $.ajax({ type: "POST", url: "file2.php ...

The ReactJS redirect URL is constantly changing, yet the component fails to load

I recently started using reactjs and I encountered an issue with routing from an external js file. Here is the code in my navigation file, top-header.js import React from 'react'; import {BrowserRouter as Router, Link} from 'react-router-do ...

I'm looking for a solution to correct the array output from my function in node

I have a function that is currently functioning, but I am in need of proper array sorting. First, I will display my code, followed by the current output and then the desired output. Can someone help me edit my entire code and output? var app = require(&a ...

Decode JSON using "Cyrillic characters"

I need help parsing a JSON file containing Cyrillic characters: roles = { "\U0430\U043d\U0430\U043b\U0438\U0442\U0438\U043a\U0430.\U043c\U043e\U0431" = ( ...

Having trouble retrieving the 'WWW-authenticate' header from the $http response in Angular?

Can someone explain why the 'WWW-Authenticate' header appears to be null in the response, even though it is visible as a stringified object in Chrome dev tools? On the server side, I have set the WWW-Authenticate header and configured the necess ...

Unable to retrieve res.user.username while using passport within express-session

I'm currently diving into the realm of creating sessions with Passport.js and Express.js. My goal is to retrieve the username from a user stored in a session using res.user.username, but I seem to be facing some challenges. Below is the snippet of m ...

Using API JSON, fill the second dropdown list based on the selection made in the first dropdown

I need help in populating data in the 2nd drop-down list based on the selection made in the 1st drop-down list. I am currently using AJAX to fetch and display the data in the 2nd drop-down list. Below is the JSON output when facID = F09: Here is the AJAX ...

Using TypeScript to call Node.js functions instead of the standard way

Can someone assist me with the issue I'm facing? I have developed a default node.js app with express using Visual Studio nodejs tools, and now I am attempting to call the setTimeout function that is declared in node.d.ts. The code snippet in question ...

Discover distinct and recurring elements

Having two sets of JSON data: vm.userListData = [{ "listId": 1, "permission": "READ" }, { "listId": 2, "permission": "WRITE" }, { "listId": 2, "permission": "READ" }, { "listId": 3, ...

AngularJS and Ionic Framework - Click on a specific row to interact with it

I am struggling to open a new page when an item is touched in my HTML code. Despite trying multiple times, I can't seem to make it work and I'm at a loss as to why. Below is the snippet of my HTML: <!DOCTYPE html> <html> <hea ...

Firebug detected an error with the regular expression flag "h" after executing the YUI Compressor

When I run YUI Compressor, an error occurs with the message: invalid regular expression flag h [Break On This Error] ction(event){$(this).removeClass('lumi...cs_glb.php</b> on line <b>221</b><br/> The issue seems to be with t ...

Believing in false promises as true is what the statement assumes

I'm working on authentication for my app and encountered the following code: const ttt = currentUser.changedPasswordAfter(decoded.iat); console.log(ttt); if (ttt) { console.log('if thinks ttt is true'); The changedPasswordAfter fu ...

When using the `coffee-util` library, an issue may arise if the `require('./module')` function ends

When I develop using CoffeeScript 1.6.3, I simply run my application with coffee myapp. I also use coffee -c . to check the resulting .js files. However, when I try running coffee myapp again, the coffee utility for require(./module) uses .js files inste ...

What could be causing the browser to become unresponsive when making several AJAX requests to the same ASP.NET MVC action at once?

The other day, I posed this query: Why is $.getJSON() causing the browser to block? I initiated six jQuery async ajax requests simultaneously on the same controller action. Each request takes around 10 seconds to complete. Upon tracking and logging re ...