Efficiently transmitting multiple data sets with AngularJS through a single request

Question

Efficiently transmitting multiple data sets with AngularJS through a single request

As I develop a simple examination application using Angular for the frontend, I have been struggling with a particular issue for the past two days. The problem revolves around making a POST request where the data to be posted comes from iterated data in my view (specifically, question.id and tempanswer through ng-repeat directive). While I know how to make single requests, this specific scenario has me stumped.

Take a look at the code snippet below:

Backend:

(Code snippet provided for backend)

Angular (frontend):

(Code snippet provided for Angular/frontend)

View (HTML):

(Code snippet provided for HTML/view)

I have tested my API using Postman and it works correctly with the specified format. However, when used in my backend, the tempAnswer returns null. I suspect the issue lies within my Angular setup. Any suggestions or solutions would be greatly appreciated. Since I am new to Angular, I'm eager to learn and improve.

javascript angularjs laravel-5.1

Answer 1

Answer №1

After debugging a bug in my app, I made some changes to both the view and model (Angular side) that might help others facing similar issues.

In the Angular side, I declared an empty object as a container for answers and question IDs.

$scope.answers={}; // declaration at global level.

$scope.mobileSubmitExam = function() {

        var result = $window.confirm('Are you sure you want to submit?');
        var submitInfo = {
            'answers': JSON.stringify($scope.answers),
            'student_id': $scope.studentDetail.id,
            'subject_slug': $scope.subject_slug,
            'subject_id': subject_id
        };
        console.log(submitInfo);
        if(result == true) {

            $http.post(BASE_URL + 'mobile/examination/submit', submitInfo)
                .success(function(response) {
                    $scope.answers = '';
                    console.log(response);
                })
                .error(function() {
                    $window.confirm('Error occurred while submitting the examination!');
                })
        }
    };

And in the view:

<input type="text" name="answers" id="answers" ng-model="answers[detail.id]" class="validate"> // After change.

<input type="text" name="answers" id="answers" ng-model="answers" class="validate"> // Before change.

That's all. Thank you for all the comments and reactions, I truly appreciate it.

Answer 2

After debugging a bug in my app, I made some changes to both the view and model (Angular side) that might help others facing similar issues.

In the Angular side, I declared an empty object as a container for answers and question IDs.

$scope.answers={}; // declaration at global level.

$scope.mobileSubmitExam = function() {

        var result = $window.confirm('Are you sure you want to submit?');
        var submitInfo = {
            'answers': JSON.stringify($scope.answers),
            'student_id': $scope.studentDetail.id,
            'subject_slug': $scope.subject_slug,
            'subject_id': subject_id
        };
        console.log(submitInfo);
        if(result == true) {

            $http.post(BASE_URL + 'mobile/examination/submit', submitInfo)
                .success(function(response) {
                    $scope.answers = '';
                    console.log(response);
                })
                .error(function() {
                    $window.confirm('Error occurred while submitting the examination!');
                })
        }
    };

And in the view:

<input type="text" name="answers" id="answers" ng-model="answers[detail.id]" class="validate"> // After change.

<input type="text" name="answers" id="answers" ng-model="answers" class="validate"> // Before change.

That's all. Thank you for all the comments and reactions, I truly appreciate it.

Efficiently transmitting multiple data sets with AngularJS through a single request

Answer №1

Similar questions

Retrieving the value of a JavaScript variable from an HTML document using Python

Expiration Alert: SSL Certificates for HERE Links will expire shortly

What is the best way to integrate a JSON response obtained from $http.get in Angular?

Store the active tab in AngularJS with Bootstrap to easily remember and display

What is the best way to incorporate a Video Player into React-JSX?

The use of an import statement outside a module in the /node_modules directory is prohibited

An inconsistency with the return value of promises in $httpBackend

Customizing Bootstrap Vue to prevent tooltips from opening on hover

What are the steps for implementing dependencies in a Vue component?

Guide for linking together multiple Axios calls to ensure they execute in sequence and enable each call to access the data obtained from the preceding call

Error: Attempting to execute functions on a dialog before it has been properly initialized with jQuery

What is the reason for the discrepancy in displaying between these two arrays?

Initiate an AJAX call and in the event that a particular object is found in the JSON response, proceed to send a subsequent request targeting

What is the best way to retrieve a specific item from an array of objects stored in JSON format using React?

Experience screen sharing through WEBRTC without the need for any additional browser extensions

Sending multiple AJAX post requests in succession

Guide to utilizing various Nodelists using the forEach function

Utilize passed props in components as well as Redux state information

Guide to retrieving objects in React.js

What is the method to access a variable within an attribute that is not prefixed with ng-*?