消費REST API在AngularJS例

-2

我有一個小的應用程序中，我有一個第三方網址這是重倉JSON數據，並使用我想建立使用AngularJS頁面的JSON數據。任何人都可以幫助我解決如何使用它。因爲我是非常新的AngularJS。我需要一個簡單的工作演示。消費REST API在AngularJS例

複雜的JSON是象下面這樣：

"_embedded":{ 
     "session":[ 
     { 
      "createdDate":"2017-03-10T14:51:44.000+0000", 
      "updatedDate":"2017-03-10T14:51:44.000+0000", 
      "deletedDate":null, 
      "title":"xxx xxx cccc", 
      "track":"cccc cccccc cccc", 
      "speaker":"Speaker: ddddddddd", 
      "sessionAbstract":"loremipsum loremipsum loremipsum loremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsum", 
      "sessionDate":null, 
      "_links":{ 
       "self":{ 
        "href":"http://www.someurl.com/adcbf" 
       }, 
       "session":{ 
        "href":"http://www.someurl.com/adcbffdfdsf/57457" 
       } 
      } 
     }, 
     { 
      "createdDate":"2017-03-10T14:51:44.000+0000", 
      "updatedDate":"2017-03-10T14:51:44.000+0000", 
      "deletedDate":null, 
      "title":"xxx xxx cccc", 
      "track":"cccc cccccc cccc", 
      "speaker":"Speaker: ddddddddd", 
      "sessionAbstract":"loremipsum loremipsum loremipsum loremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsum", 
      "sessionDate":null, 
      "_links":{ 
       "self":{ 
        "href":"http://www.someurl.com/adcbf" 
       }, 
       "session":{ 
        "href":"http://www.someurl.com/adcbffdfdsf/57457" 
       } 
      } 
     } 
     ] 
     }

從複雜的JSON對象，我只需要拿到「稱號」，「跟蹤」，「音箱」

我厭倦了這樣下面的代碼：

angular.module('myApp', []).controller('MyController', function ($scope, $http) { 
    $scope.findValue = function() { 

$scope.complexJSON = [{"_embedded":{ 
     "session":[ 
     { 
      "createdDate":"2017-03-10T14:51:44.000+0000", 
      "updatedDate":"2017-03-10T14:51:44.000+0000", 
      "deletedDate":null, 
      "title":"xxx xxx cccc", 
      "track":"cccc cccccc cccc", 
      "speaker":"Speaker: ddddddddd", 
      "sessionAbstract":"m", 
      "sessionDate":null, 
      "_links":{ 
       "self":{ 
        "href":"http://www.someurl.com/adcbf" 
       }, 
       "session":{ 
        "href":"http://www.someurl.com/adcbffdfdsf/57457" 
       } 
      } 
     }  ] 
     } 

<div ng-app="myApp"> 
<div class="row"> 
     <fieldset class="scheduler-border col-lg-6" ng-controller="MyController"> 
<input type="text" class="form-control" placeholder="Session Search" ng-model="getSession.title" /> 
<input type="text" class="form-control" placeholder="Tracks" ng-model="getSession.track" /> 

<button type="button" ng-disabled="!getSession" ng-click="findValue()">Search</button> 

<p data-ng-bind="getSumAssured"></p> 
      <ul> 
       <li ng-repeat="pa in complexJSON | filter:getSession"> 
        <p>Age: <b data-ng-bind="pa.title"></b> 

        </p> 
       </li> 
      </ul>

來源

2017-03-21 phphunger

http://jsfiddle.net/vitconte/tG46g/ –

嗨Jatin，感謝您的答覆。但是你的json並不那麼複雜，因爲我需要消耗類似的複雜數據。我修改了我的帖子。請看看它。 – phphunger

對於任何數量的數據，這個概念都是一樣的。嘗試一下，讓我知道你面臨的問題。您可以發佈您迄今已嘗試過的代碼。 –

你在找這樣的嗎？

<ul> 
    <li ng-repeat="pa in complexJSON._embedded.session | filter:getSession"> 
     <p>Title: <b data-ng-bind="pa.title"></b> </p> 
     <p>Track: <b data-ng-bind="pa.track"></b></p> 
     <p>Speaker: <b data-ng-bind="pa.speaker"></b></p> 
    </li> 
</ul>

請詳細說明您的問題，使我們能提供更具體的解決方案

來源

2017-03-21 13:28:01

是的，類似於這樣的東西。但是我無法從REST API服務中獲取數據，它會引發一個異常，因爲** bold ** XMLHttpRequest無法加載http://52.43.36.180:8080/session?size=1000。請求的資源上沒有「Access-Control-Allow-Origin」標題。原因'http：// localhost：81'因此不允許訪問。** bold ** – phphunger

然後您的第一個問題是訪問API資源。數據讀取和顯示是次要問題。參考http://stackoverflow.com/questions/21455045/angularjs-http-cors-and-http-authentication您的問題的第一部分 –

消費REST API在AngularJS例

回答

相關問題