1

I'm trying AngularJS for the first time. I'm getting as imple user JSON data from a http-get request, but the object is returned null. I tested my service using chrome and I get this result:

[{"id":1,"email":"[email protected]","name":"walid"}]

Below my js file:

var app = angular.module("userApp", []);
app.controller("userController", function($scope, $http) {
$scope.user = null;
$scope.name = null;

$scope.getUser = function() {
    $http({
        method : 'GET',
        url : '/all',
    }).success(function(data) {
        $scope.user = json.stringify(data);
    }).error(function(data) {
        alert('Fail: user is  '+data);

        });
    }
});

My HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SIM Card</title>
<link rel="Stylesheet" type="text/css"
href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="Stylesheet" type="text/css" href="css/simcard.css">
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/simcard2.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
</head>
<body ng-app="userApp" ng-controller="userController">

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="panel panel-info spacer">
        <div class="panel-heading">User Management</div>
        <div class="panel-body">
            <form action="">
                <div class="form-group">
                    <label>ID</label> <input type="text" ng-model="email">
                    <button ng-click="getUser()" type="submit">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="panel panel-info spacer">
        <div class="panel-heading">Result</div>
        <div class="panel-body">
            <div class="form-group">
                <label>Name: </label>
                <label>{{user.name}}</label>
            </div>
        </div>
    </div>
</div>
</body>
</html>

I can send the whole maven project in case needed. Thank you for your help.

Regards, Walid

Improve this question
5
  • What is the URL of the REST service? Commented Nov 1, 2016 at 13:53
  • Where do you get the REST service?! Is it local or it's online!? Commented Nov 1, 2016 at 13:56
  • yes it is local: localhost:8080/all Commented Nov 1, 2016 at 14:00
  • 1
    "I can send the whole maven project in case needed" I don't think that would be needed. Instead, you should try to create a minimal reproducible example - what can you remove from your code and still reproduce the problem? Commented Nov 1, 2016 at 14:09
  • @WalidRoamsmart Check my answer and let me know if you needed any more information! Commented Nov 1, 2016 at 14:30

3 Answers 3

Reset to default
1

you can do it like this:

var app = angular.module("userApp", []);
app.controller("userController", function($scope, $http) {
    $scope.getUser = function() {
       return $http.get('/all').then(
            function successCallback(response) {
                // you can log response here to see what it is
                // or you can simply check network in your browser DevTools
                $scope.users = response;
            },
            function errorCallback(response) {
                alert('There was error retrieving users List');
            }
        );
    };
});

once that is done based on your response which is an array you can repeat it in your view. ngRepeat is also watching your model update so every time you update $scope.users it will update itself.

So you can simply use this in your view:

<div ng-app="userApp" ng-controller="userController">
    <ul>
        <li ng-repeat="user in users">
           <span> {{user.id}} {{user.name}} {{user.email}} </span>
        </li>
    </ul>
</div>

The benefit of using $http.get(...).then() is that you can you can use promise chain with ease to build other services on top of this. In your case you have to make sure that you check your response.

// Update :

Here's a Bin that you can see the code above in action: https://jsbin.com/luguzu/1/edit

Just in output hit Run with js and click Get Users.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I've used jsonplaceholder.typicode.com for getting user information in the bin.
0

The problem is in your config of the request: http://plnkr.co/edit/qEkpUAXQQZmO9iUAZ2aX?p=preview

It doesn't know what type of data you expect in response.

Your http request should look like this:

 $http.get("test.json").success(function(data) {
    $scope.user = data[0];
}).error(function(data) {
    alert('Fail: user is 2 '+data);
});

Update:

Just noticed something in yout HTML - you have there a form with action empty. This is the cause of the request being canceled. in angularjs to have a form, it is enought to add to a div ng-form="myForm" and the input can be just simple button, not submit and it is going to work fine.

Improve this answer

8 Comments

still gettings user is null:
@WalidRoamsmart can you provide a snapshot of your request/response visibile in dev tools?
just added the image file
Hello Diana, I got the same result
@WalidRoamsmart you can post here the links, or edit your initial question to add them instead of posting as answers - this is a bad practice. Can you send me the maven project so I can see the entire source code?
|
0

Here it is the image of my network console... enter image description here

Improve this answer

2 Comments

Looks like your request is not even sent. Also, you should send the request to : $http.get("all").success(function(data) { $scope.user = data[0]; }).error(function(data) { alert('Fail: user is 2 '+data); }); In the link I showed you, it just does a request to test.json which is a file. In your case, is link "all". Try that and see what you get.
Great. Then make sure you mark the answer as resolved for other people who will have the same issue.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.