AngularJS doesn't display json object in html after $http.get request

Question

I'm trying to make a get request and display the json data. Here is the html div tag where the data should be displayed:

<div ng-app="app" ng-controller="searchController">
    <ul>
        <li ng-repeat="name in datas">
            {{ name }}
        </li>
    </ul>
</div>

And here is the app:

var app = angular.module('app', [

]);

app.factory('getRequest', ($http) => {
    function get() {
        return $http.get('http://localhost:8080/imagedata/')
            .then((response) => {
                console.log(response.data);
                return response.data;
            },
            (error) => {
                return error.statusText;
            });
    }

    return {
        get: get
    }
});
app.controller('searchController', ['$scope', 'getRequest', ($scope, getRequest) => {
    $scope.datas = getRequest.get();
}]);

Inside factory I have a console.log. The data is shown in console, but not in html view. I can't explain what is happening. The code should be works fine.

datas is an Observable (for promise for Angular 1?) after the assignment, no? — user2864740
– user2864740, Commented Jan 22, 2022 at 22:33
Anyway, for angular 1, probably something like stackoverflow.com/a/21338035/2864740 to wait for the promise result to assign to the VM. (The async pipe is only 2?) — user2864740
– user2864740, Commented Jan 22, 2022 at 22:39

Gerald LeRoy · Accepted Answer · 2022-01-23 11:33:07Z

1

It's a little hard to tell what the solution is without seeing your console data. If the data ('datas') displayed in your console is an array of objects, for example something like this...

[
    {customerId: '123', name: 'Person1', city: "Toronto"}, 
    {customerId: '456', name: 'Person2', city: "Los Angeles"},
    {customerId: '789', name: 'Person3', city: "New York"}
]

you'll want to name the specific properties, like this..

<div ng-app="app" ng-controller="searchController">
    <ul>
        <li ng-repeat="item in datas">
            {{item.name}} <--------------
            {{item.customerId}} 
            {{item.city}} 
        </li>
     </ul>
</div>

edited Jan 23, 2022 at 11:33

answered Jan 23, 2022 at 11:27

Gerald LeRoy

1,2872 gold badges11 silver badges18 bronze badges

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

Comments

yontu · Accepted Answer · 2022-01-25 07:30:24Z

0

I found the solution. As @user2864740 said, in my code I've returned the promise, not a good practice. Passing a promise into ngRepeat here is the solution

answered Jan 25, 2022 at 7:30

yontu

375 bronze badges

Collectives™ on Stack Overflow

AngularJS doesn't display json object in html after $http.get request

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related