inspect response for variable(errors) before updating the dom

Question

I am very new to angular and javascript in general and familiar enough with php and laravel that today I started a little learner app that join the two. I have angular displaying a list of resources returned to it from laravel. I have a text field that can be submitted to laravel which validates the input and stores it in the db and angular pushes the input field to the list. This works fine. however when the validation fails the input is still pushed to the list in the dom. What I want to do is inspect the response from the server for errors (returned as json) and only if there are none update the dom with the text field.

html

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Loadmaster</title>
</head>
<body ng-controller="DzsController">
<h1>Dropzones</br>
    <small ng-if="open()">{{ open() }} Open</small></br>
    <small ng-if="jumping()">{{ jumping() }} Jumping Right Now!</small>
</h1>
<input type="text" placeholder="Filter dzs" ng-model="search">
<ul>

    <li ng-repeat="dz in dzs | filter:search">

        {{ dz.name }}
        <input type="checkbox" ng-model="dz.open">
        <input type="checkbox" ng-model="dz.jumping">
    </li>


</ul>

<form ng-submit="addDz()">
<input type="text" placeholder="Add a new dz" ng-model="newDzText" required>
<button type="submit">Add Task</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="/js/main.js"></script>

main.js

function DzsController($scope, $http) {
    /*$scope.dzs = [
    { name: 'Perris', open: true, jumping: true },
    { name: 'Elsinore', open: false, jumping: false }
    ];*/

    $http.get('/dzs').success(function(dzs) {
        $scope.dzs = dzs;
    });

    $scope.open = function() {
        var count = 0;

        angular.forEach($scope.dzs, function(dz) {
            count += dz.open ? 1 : 0;
        });

        return count;
    };

    $scope.jumping = function() {
        var count = 0;

        angular.forEach($scope.dzs, function(dz) {
            count += dz.jumping ? 1 : 0;
        });

        return count;
    };

    $scope.addDz = function() {
        var dz = {
            name: $scope.newDzText,
            open: false,
            jumping:false
        };

        //$scope.dzs.push(dz);

        $http.post('dzs', dz);

    };
}

validation errors json

{"name":["The name field is required."]}

solution

$scope.addDz = function() {
        var dz = {
            name: $scope.newDzText,
            open: false,
            jumping:false
        };

        $http.post('dzs', dz).success(function(data, status) {
            if(isDefined(data.errors)) {
            console.log(data.errors);
            } else {
                console.log('no validation errors');
            }
        });

    };

score 1 · Accepted Answer · answered Jan 04 '14 at 19:59

1

$http returns object called "promise" which is resolved when request is completed.

So you can use the callback to update list of "dzs" after call is returned:

$http.post('dzs', dz).success(function(data, status) {

    if (data.isValid === true) {
       $scope.dzs.push(dz);
    }
});

data.isValid === true - is of course just an example - do an appropriate check based on response you get after validation.

answered Jan 04 '14 at 19:59

Leonti

10,400
11
43
68

Thank you you definitely sent me in the right direction although I couldn't get your exact way to work(I am sure it is my understanding) but when combined with answer http://stackoverflow.com/questions/3954630/check-if-a-object-is-defined-best-practice I got it figured out. I have pasted my solution into the question if you care to have a look – Mark Jan 04 '14 at 21:05

inspect response for variable(errors) before updating the dom

1 Answers1