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

utilize PHP for encoding JSON data in UTF-8

According to the php manual for json_encode(), which can be found at http://php.net/manual/en/function.json-encode.php, it states that all string data within the first input parameter value must be UTF-8 encoded. Does this requirement imply that the strin ...

Where can the Path be found for Json inside App Phonegap?

Having some trouble with my Phonegap App! Everything seems to be working fine when I test it in my browser. However, once I compile it into an APK and install it on my phone, it's unable to find the JSON data. I'm a beginner in programming and a ...

`The resurgence of CERT_FindUserCertByUsage function in JavaScript`

I am currently grappling with unraveling the connection between C++ dlls and JavaScript. There is a snippet of js code that reads: cert = CERT_FindUserCertByUsage(certDB, certName.nickname,certUsageEmailSigner, true, null); where the variable cert is ini ...

Can one customize the background color of a segment in a radar chart using Chart.js?

Could I customize the color of the sectors in my radar chart to resemble this specific image? https://i.stack.imgur.com/U8RAb.png Is it feasible to achieve this using Chart.js? Alternatively, are there other chart libraries that have this capability? It ...

Assign a value to a ReactiveForm within a Jasmine test suite

I am currently working on learning how to unit test a reactiveForm in Angular. My goal is to populate a field with a value and then verify the form's validity after adding that value. Here is where I currently stand: Snippet from my Jasmine test: ...

Angular UI Router allows for the resolution of data before a state

When working on my angular sample route, I attempted to achieve the following: (function(angular){ 'use strict'; angular .module('appRouter',['ui.router']) .controller('routerCtrl',function( ...

Ways to constrain checkbox choices to only one within an HTML file as the checklist with the checkboxes is being created by JavaScript

I am working on developing an HTML dialogue box to serve as a settings page for my program. Within this settings page, users can create a list of salespeople that can be later selected from a drop-down menu. My current objective is to incorporate a checkbo ...

Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

I'm currently facing an issue with my code snippet below: getInformations().subscribe( informations => { let subs = []; for (const information of informations) { subs.push(getOtherDetails(information.id)); } ...

directive unit testing unable to access isolatedScope as it is not recognized as a valid

Currently, I am in the process of conducting unit tests on a directive that was previously created. For my initial test, I simply want to verify a specific variable within the scope of the directive. However, whenever I attempt to execute the method isola ...

react-router is unable to navigate to the desired page

I am currently using react-router-dom in my project, but I am still relatively new to it. I have encountered an issue regarding page navigation. Below is the code for my App.js: class App extends Component { render() { return ( <div classN ...

Toggle the visibility of an element by clicking a button

I have a table structured as follows: <tr> <td class="title">Title</td> <td class="body">Body</td> <td class="any">Any text</td> </tr> <tr> <td class="title">Title</td> ...

Combining arrays retrieved from a looped PHP MySQL JSON query

After running a PHP Looped Query, I ended up with 4 table results. The expected result was to have the data organized as follows: |_Number_|_w1_|_w2_|_w3_|_w4_| | 1 | 1 | 1 | 1 | 1 | | 2 | 1 | 1 | 1 | 1 | | 3 | 1 | 1 | 1 | 1 ...

Dealing with massive JSON files can be overwhelming as it often results in memory issues

Seeking guidance on utilizing the stream API json with jackson. Browse through my code snippet below: ObjectMapper mapper = new ObjectMapper(); Map<String, Object> map = new HashMap<String, Object>(); List<Object> list = n ...

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

Selecting multiple elements with the same attribute value using jQuery

I am looking to target specific DOM elements using jQuery. Below is the HTML code: <li> <span class="node> <span class="con"></span> <span class="check"></span> <img> <a title="high">abc&l ...

Integrating eBay API with Node.js

Hello, I am new to Node.js and I could really use some assistance with exporting console log data to an HTML page. I came across a helpful example on GitHub at this link: https://github.com/benbuckman/nodejs-ebay-api My current issue is that although I h ...

Is there a way to ensure that any updates made to the backend database are immediately visible in the browser?

Currently, I am facing an issue with my hardware scanner that is connected to a Windows computer. Whenever I scan an item using the hardware scanner, the Windows computer retrieves the price/information about that specific item. Then, I manually input this ...

Confusion arises from the code for processing an Ajax redirect

I finally succeeded in incorporating an Ajax call into my code, but I'm a bit puzzled about how to redirect after the call is made. Below is an example of my script, developed using CodeIgniter: <script type="text/javascript"> function myFunc ...

PHP AJAX Request Failing to Transfer Files

I am having trouble with sending files in a PHP AJAX Request: Here is the form code: <form class="frmContact" action="#" method="post"> <div class="col-md-6"> <input type="hidden" name="emailTo" id= ...

Issue with function execution within useEffect() not being triggered

I am facing an issue where two functions in my component are not being called every time it renders, despite my efforts. Placing these functions in the dependency array causes an infinite loop. Can anyone identify why they are not executing? function Por ...