Sending JSON data stored in $scope using AngularJS with AJAXPOST request

I am frustrated: I am currently working on an AngularJS project and struggling to correctly post data.

I have filled out some HTML input fields, with values stored in a variable like $scope.product, and now I need to send this JSON structure of $scope.product to a webservice that I have set up.

However, when I use the inspector tool, nothing seems to be happening.

This is what I have written so far:

$scope.save = function() {
    console.log($scope.product);

    $http.post('./service/products/create', $scope.product).error(function(data, status, headers, config){
        console.log($scope.product);
    });

};

The save function is connected to a button through the ng-click attribute. When I click the button, "save" is triggered. I can see that $scope.product has the correct values (thanks to console.log), but...the server does not receive anything, and inspecting the request using Chrome's inspector shows an empty array being sent.

So, what am I doing wrong here?

Thank you in advance!

ajaxjsonangularjspostangularjs-scope

Answer №1

I have discovered the resolution.

Regrettably, the variable "$scope.prodotto" was declared as an array:

$scope.prodotto = [];

The remedy is straightforward. Declare it as an object:

$scope.prodotto = {};

That concludes it.

Answer №2

If there is an issue with the original post, make sure to handle the ajax call properly. To do so, utilize the success callback in the following manner:

$scope.store = function() {
    console.log($scope.item);

    $http.post('./service/items/add', $scope.item)
    .success(function(data, status, headers, config){
        console.log($scope.item);
    })
    .error(function(data, status, headers, config){
        console.log($scope.item);
    });

};

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

What is the best way to convert a BigDecimal to a decimal format within a JSON response when using JAX

While utilizing Tomee 8 as my application server, I am encountering an issue when my REST service returns a BigDecimal. This is the structure of my service: import javax.ws.rs.Consumes; import javax.ws.rs.POST; import javax.ws.rs.Path; import javax.ws.rs. ...

javajsonjax-rsbigdecimalapache-johnzon

Discover how to access the DOM after AngularJS directive rendering is finished

Looking to create a unique scroll pane component using an AngularJS directive? Check out this jsfiddle example for a basic prototype. Here is the concept behind my custom scroll pane: Directice code snippet: myApp.directive('lpScrollPane', ...

javascriptwebwidgetcomponentsangularjs

Can you provide guidance on accessing the response API from Twitter?

Currently, I am in the process of creating a toy project using React and Express.js, similar to a basic SNS website. Usually, the server responds to a client request by sending back JSON data containing all the necessary information for rendering articles ...

jsonapiexpressresponse

What is the best way to connect my Angular 2 project to the "$wakanda" service in order to access and retrieve data efficiently?

Recently, I started a new project on the wakanda.io platform using angular2 and backend technologies. After creating some database entities, I now need to retrieve data from the database on the client side. To do this, I am looking for a way to import the ...

javascriptangularjsangularwakanda

Send JSON data that has been refined utilizing jQuery

I am attempting to create a filtered JSON response using jQuery following a successful GET request of the original JSON response. The initial JSON response is an array of products from our Shopify store for the specific collection page the user is viewing. ...

javascriptjqueryjsonajax

Using Ajax and PHP to load a database table

I have a dropdown menu set up as follows: <select name="location_" required="required" id="location_"> <option value="Location_1">Location_1</option> <option value="Location_2">Location_2</option> < ...

phpmysqlajax

Error encountered when trying to submit registration form, POST request failed

I am currently working on developing a web application that includes a login and registration form. However, I have been facing an issue where the registration fails every time I attempt to register a new user. Below is the code snippet for the POST method ...

node.jsformsexpresspostejs

Querying a Database to Toggle a Boolean Value with Jquery, Ajax, and Laravel 5.4

I am facing an issue with a button I created to approve a row in a table. It seems that everything is working fine when clicking the button, but there is no change happening in the MySQL database Boolean column. Here is the code for my button: <td> ...

javascriptphpjqueryajaxlaravel-5.4

Connect ngModel value between multiple components

If you have a file named about.component.ts, it would contain the following code: import { Component } from '@angular/core'; @Component({ selector: 'about-section', template: ` <input [(ngModel)]="name" placeholder="First N ...

angularjsangular

Sending Code Through POST Using jQuery

Users can input code in a textarea with the id of 'code_box'. <textarea id = 'code_box'></textarea> The following jQuery uses ajax to send the code to a PHP script for processing. $('#submit_button').click(funct ...

jqueryajax

data storage using sessionstorage for session management

Currently, I am managing sessions in my MEAN app by utilizing AngularJS to store user data in the browser's sessionStorage. The process consists of: User logs in through the front-end User is fetched from the back-end (node) Returned data is saved t ...

angularjsnode.jsmean-stack

How can I generate a sorted array of objects in a JSON output using PowerShell?

Is it possible to generate a JSON output with an array of objects sorted in ascending order based on the "count" property? I need to maintain the original $result object structure, without caring about the order of "Good" or "Bad", My goal is to sort the o ...

arraysjsonpowershellsortingpscustomobject

Exploring the process of transforming a JSON array into separate JSON objects using Node.js

I am struggling with converting a JSON array to multiple JSON objects in Node.js. I've attempted using loops but have been unsuccessful. I'm seeking assistance to send the data as separate objects, not an array. router.get('/frontpage-mobil ...

arraysnode.jsjsonloops

Changing the content of a JSON save file in ASP.NET: A step-by-step guide

I have successfully bound data from a database to a JSON file using code in the code-behind file. string JSONString = JsonConvert.SerializeObject(datatable); The default format for storing a data table in a JSON file is as shown below: [ { "Produc ...

c#asp.netjson

NodeJs google analytics reporting API returning null response object

Just getting started with a question. In my project, I am utilizing NodeJS to interact with the Google Analytics Reporting API. I have successfully obtained the necessary OAuth 2 token and even receive a 200 response when querying the API. However, instea ...

jsonnode.jsgoogle-analyticsgoogle-analytics-apigoogle-api-nodejs-client

Error: Request Timed Out - The asynchronous callback function was not executed within the specified timeout set by the jasmine.DEFAULT_TIMEOUT

Currently, I am in the process of testing my Ionic app using Jasmine. Below is a snippet from my test suite: beforeEach(() => { auth = new Authentication(<any>new HttpMock(), <any>new StorageMock()) user = new MockUser(); head ...

angularjsionic-frameworkjasminekarma-jasmine

Error Encountered: Django - AJAX Request Not Found

I'm currently working on building an ajax function that, when triggered, should display information in a newly created modal. I seem to be encountering an error that says "not found" every time I attempt to access the specified URL. Below is a screens ...

ajaxdjangojquerydjango-views

Utilize ng-click in conjunction with an AngularJS directive

I'm encountering an issue while trying to create a directive and attaching ng-click with the template. Despite my efforts, when clicking on the template, it fails to log the statement from the scope.scrollElem function. The directive has been success ...

javascriptjqueryangularjs

"Upon parsing the JSON data, the decoder yielded a null

This question has been asked many times before, but I am still struggling to get it working. I have a JSON and when I dump the $TenentsAccessible output, it looks like this: string(71) "[{`TenantID`:`test.com`,`Name`:`12thdoor`}]" I need to extract the ...

phpjson

Regions for the MEAN stack

On our website, let's call it "www.xxxx.com," we need to develop a sub-portal dedicated to a specific company referred to as "www.xxxx.com/company1." This sub-portal should contain all the necessary controllers and views within an Area called "Company ...

angularjsnode.jsexpressmean-stack