Angular http get no response from api

Question

I am trying to get any information with Angular from the local api that I have created in Ruby, Sinatra platform. I am sure that the api is running on the port 4567 since I can see the data if i access m it directly through web interface. When I do that I see this (just next to the number 0 there is like a small arrow so it is possible to minimize the details of the object):

  0
 id "1"
 name   "Company-A21"
 address    "Gany-A11"

If I want to see RAW data I get this:

[{"id":"1","name":"Company-A21","address":"Gany-A11"}]

On the "other side" I am running apache2 and this HTML file:

    <!doctype html>
<html >
    <head>
        <title>Hello AngularJS</title>
        <script src="hello.js"></script>
    </head>

    <body>
        <div ng-controller="Hello">
            <p>The ID is {{company.id}}</p>
            <p>The content is {{company.name}}</p>
        </div>
    </body>
</html>

And the hello.js:

angular.module('demo', [])
.controller('Hello', function($scope, $http){

    $http.get('http://localhost:4567/api/v1/companies/2').
    then(function(response) {
            $scope.company = response.data;
    });
 });

Why I can not see response? I just started to practice Angular and I stuck here...

If your data is exactly what you have then it is formatted incorrectly. You showed: [{"id":"1","name":"Company-A21","address":"Gany-A11"] but it should be [{"id":"1","name":"Company-A21","address":"Gany-A11"}] or like this {"id":"1","name":"Company-A21","address":"Gany-A11"} — Intervalia
– Intervalia, Commented Nov 15, 2017 at 2:51
See my comment in Ronnie's answer below. I think his answer should help you the most. — Intervalia
– Intervalia, Commented Nov 15, 2017 at 17:12

Ronnie · Accepted Answer · 2017-11-15 00:05:03Z

1

Your data is an array of objects so you'd output it like: {{company[0].id}}

You probably followed an example using ng-repeat which would look something like this:

<div ng-repeat="company in companies">
   <p>The ID is {{company.id}}</p>
    <p>The content is {{company.name}}</p>
 </div>

https://jsfiddle.net/ojzdxpt1/21/

answered Nov 15, 2017 at 0:05

Ronnie

11.2k22 gold badges85 silver badges144 bronze badges

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

3 Comments

quant Over a year ago

Could you Please expand your answer just a little bit more. I see what is my problem, I don't know how to return the object inside of an array

Intervalia Over a year ago

Since your data is in an array you either need to do an ng-repeat as shown above to walk through all of the data within the array. That would replicate the <div> and the two <p> tags once per entry in the array. Or you can access a single entry within the array like Ronnie demonstrated by using {{company[0].id}} and {{company[0].name}}. Although I would probably use $scope.companies as my variable name or change your controller code to read $scope.company = response.data[0]; if you know you will only ever get one entry back.

Ronnie Over a year ago

@Intervalia beat me to it! Good explanation.

Syedur · Accepted Answer · 2017-11-15 05:31:43Z

Use ng-init to execute your get request. Implement your api call under a method:

angular.module('demo', [])
.controller('Hello', function($scope, $http){
    $scope.getCompany = function(){
       $http.get('http://localhost:4567/api/v1/companies/2').
         then(function(response) {
            $scope.company = response.data;
         });
       }
 });

and use it in ng-init:

  <!doctype html>
<html >
    <head>
        <title>Hello AngularJS</title>
        <script src="hello.js"></script>
    </head>

    <body>
        <div ng-controller="Hello" ng-init="getCompany()">
            <p>The ID is {{company.id}}</p>
            <p>The content is {{company.name}}</p>
        </div>
    </body>
</html>

Collectives™ on Stack Overflow

Angular http get no response from api

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related