Angular http没有得到api的回复

时间:2017-11-14 22:49:48

标签: angularjs http get

我试图从我在Ruby,Sinatra平台上创建的本地api获取Angular的任何信息。我确信api正在端口4567上运行,因为我可以看到数据,如果我直接通过Web界面访问它。当我这样做时,我看到了这一点(就在数字0的旁边,就像一个小箭头,因此可以最小化对象的细节):

import android.app.ListActivity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Toast;


//twitter imports

import com.twitter.sdk.android.core.Twitter;
import com.twitter.sdk.android.tweetui.TweetTimelineRecyclerViewAdapter;
import com.twitter.sdk.android.tweetui.UserTimeline;


public class travel_updates extends AppCompatActivity{



    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {


        getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setDisplayShowCustomEnabled(true);
        getSupportActionBar().setCustomView(R.layout.custom_line_info);
        View view = getSupportActionBar().getCustomView();

        Twitter.initialize(this);

workHorse workhorse = new workHorse();
        workHorse.execute(UserTimeline);


        final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

    }

    private class workHorse extends AsyncTask<String, Void, String>{

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
        }

        @Override
        protected String doInBackground(String... params) {


            final UserTimeline searchTimeline = new UserTimeline.Builder().screenName("TflTravelAlerts")
                    .maxItemsPerRequest(20)
                    .build();



            final TweetTimelineRecyclerViewAdapter adapter =
                    new TweetTimelineRecyclerViewAdapter.Builder(this)
                            .setTimeline(searchTimeline)
                            .setViewStyle(R.style.tw__TweetLightWithActionsStyle)
                            .build();
        }

        @Override
        protected void onPostExecute(String s) {
            super.onPostExecute(s);
        }
    }
}

如果我想查看RAW数据,我会得到这个:

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

在“另一边”我正在运行apache2和这个HTML文件:

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

和hello.js:

    <!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>

为什么我看不到回应? 我刚开始练习Angular而且我坚持到这里......

2 个答案:

答案 0 :(得分:1)

您的数据是一个对象数组,因此您可以输出它:ng-repeat

你可能跟着一个使用<div ng-repeat="company in companies"> <p>The ID is {{company.id}}</p> <p>The content is {{company.name}}</p> </div> 的例子看起来像这样:

{{1}}

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

答案 1 :(得分:0)

使用ng-init执行get请求。通过以下方法实现api调用:

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;
         });
       }
 });

并在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>